事件的传播

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

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

事件的传播《 JavaScript 基础 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点