事件是可以传播的。比如这里有一个图像列表, 列表用的是 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 标签上注册了点击事件的监听器。就会去调用监听器里的指定的函数 …