事件是可以传播的。比如这里有一个图像列表， 列表用的是 ul 无序列表，每个列表项目里面包含着 img 标签 … 如果说，你想在用户点击列表里面的图像，去做些指定的事件的话 … 我们并不需要去单独为每一张图片都去绑定一个点击事件 …

我们可以在这个 ul 无序列表上去添加一个点击事件的监听器 .. 这样在点击列表里的项目的时候，比如点击这个图片 … 也会触发调用在事件监听器里指定的函数 … 下面我们去试一下 …

测试

（#js）

先获取到这个 ul 无序列表 … 在这个列表上添加了一个 list-group 类 … 可以用这个类去获取到这个 ul 元素 …

var listGroup = document.querySelector('.list-group');

再给它一个名字 … 叫做 listGroup … 下面我们去为这个 listGroup 添加点击事件的监听器 …

listGroup.addEventListener('click', showMessage, false);
function showMessage (event) {

console.log(event.target.alt);
}

在事件发生以后调用的函数里面，我们用到了事件的对象的 target 属性里的 alt 属性 … 它会返回在图像标签上设置的 alt 属性里的内容 …

保存 … 回到浏览器 … 点击 图像 …

在控制台上会输出图像标签里的 alt 属性里的内容 …

这里，我们并没有为每一张图像分别去添加一个事件监听器，而是在它们的共同的容器上，也就是 ul 这个元素上添加了一个点击事件的监听器 …

因为事件是会传播的 …

默认的事件传播的方式有点像是往上冒气泡，这种传播方式就是从下到上，或者说从里到外去传播 …. 比如这里，如果点击图像 … 事件会从 img 标签向上传播到 li 标签 … 再从 li 标签传递到 ul 标签 …

如果在 ul 标签上注册了点击事件的监听器。就会去调用监听器里的指定的函数 …