事件，还有一种传播方式，叫做事件的捕获方式 …. 这样，在点击图像的的时候，事件会从 ul 标签传递到 li 标签 … 再从 li 标签传递到 img 标签上 …

使用 addEventListener() 添加事件监听器的时候，设置它的第三个参数，可以改变事件的传播方式 … 设置为 false ，事件是用冒泡的方式传播 …. 设置为 true … 事件会用捕获的方式传播 …

下面，我们单独去给一张图像绑定一个点击事件，然后来看一下这两种事件传播方式的区别 … （#index.html）

我们可以在这个 Lost 图像上，先添加一个 ID … 然后使用这个 ID 去获取到这个元素 … 再为这个元素绑定点击事件 …

var lost = document.getElementById('lost');
function showAnotherMessage (event) {
console.log('点击了：' + event.target.alt);
}

再简单修改一下 …

listGroup.addEventListener('click', showMessage, false);
function showMessage (event) {
console.log('点击了：UL ');
}

这样点击列表里面的任何的图像，都会在控制台上显示一个 点击了 UL … 然后在点击 lost 这张图像的时候，会在控制台上显示 点击了 Lost …

现在，这两个事件监听器设置的事件传播的方式都是 冒泡 的方式 … 先保存一下 …

回到浏览器 …

随便点击一列表里的一张图像 … 在控制台上会显示，点击了 UL …

再点击一下 LOST 这张图像 … 控制台上，首先会显示 点击了 Lost … 因为现在事件的传播方式是从下往上传播的 … 所以，点击了 Lost 这个图像，触发了 click 事件 … 事件会向上传播到 li 标签 … 再从 li 标签传播到 ul 标签 … 因为在 ul 标签上也设置了一个事件的监听器 … 它会在控制台上会显示 点击了 UL …

（#index.html）

下面我们再去修改一下事件的传播方式 … 找到 addEventListener … 把它们的第三个参数设置为 true …

保存 .. 回到浏览器 … 刷新 ….

点击 Lost 这张图像 … 你会发现，这次会先显示 点击了 ul …. 然后是 点击了 lost … 因为现在事件的传播方式是捕获的方式 …

事件会从外向内传播 … 点击图像的时候 … 会先触发在 ul 元素上添加的点击事件的监听器里指定的动作 … 然后这个事件再传播到 li 元素 … 再从 li 元素传播到 img 元素上 ..