说说 JavaScript 中的冒泡与捕获过程
发布日期:2021-06-29 21:04:28
浏览次数:3
分类:技术文章
本文共 2750 字,大约阅读时间需要 9 分钟。
W3C 规范中定义了3个事件阶段,依次是捕获阶段 、 目标阶段 、 冒泡阶段。先捕获,后冒泡,捕获从上到下,就像石沉大海;而冒泡从下到上就像气泡冒出水面。
先看个示例:
html 页面:
冒泡与捕获
美杉 | 禄铭 |
彦芸 | 阳骞 |
js :
/* * 冒泡与捕获 * @author Deniro Lee */let html = document.documentElement;let body = document.body;let table = body.querySelector('table');let tbody = body.querySelector('tbody');let secondTr = body.querySelector('#secondTr');let firstTd = body.querySelector('#firstTd');/** * 冒泡回调 * @param event */function bubbleCallback(event) { let target = event.currentTarget; console.log('bubble -> ' + target.tagName);}/** * 捕获回调 * @param event */function captureCallback(event) { let target = event.currentTarget; console.log('capture -> ' + target.tagName);}html.addEventListener('click', captureCallback, true);body.addEventListener('click', captureCallback, true);table.addEventListener('click', captureCallback, true);tbody.addEventListener('click', captureCallback, true);secondTr.addEventListener('click', captureCallback, true);firstTd.addEventListener('click', captureCallback, true);html.addEventListener('click', bubbleCallback, false);body.addEventListener('click', bubbleCallback, false);table.addEventListener('click', bubbleCallback, false);tbody.addEventListener('click', bubbleCallback, false);secondTr.addEventListener('click', bubbleCallback, false);firstTd.addEventListener('click', bubbleCallback, false);
在浏览器中运行以上页面,点击“彦芸”后,在 Console 中会看到冒泡与捕获的过程运行结果:
点击事件对象会按照图 1 的传播路径依次完成捕获、目标与冒泡阶段。如果某个阶段不支持或事件对象的传播被终止,那么该阶段就会被跳过。
代码中使用了addEventListener() 方法来跟踪捕获与冒泡阶段事件。该方法的语法为:
element.addEventListener(event, function, useCapture)
参数 | 描述 |
---|---|
event | 必须。字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。 |
function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄会在捕获阶段执行; false- 默认值,事件句柄会在冒泡阶段执行。 |
之前定义的脚本,我们使用 addEventListener() 方法先绑定捕获方法,后绑定冒泡方法;如果我们交换下顺序,先绑定冒泡然后再捕获会怎样?
html.addEventListener('click', bubbleCallback, false);body.addEventListener('click', bubbleCallback, false);table.addEventListener('click', bubbleCallback, false);tbody.addEventListener('click', bubbleCallback, false);secondTr.addEventListener('click', bubbleCallback, false);firstTd.addEventListener('click', bubbleCallback, false);html.addEventListener('click', captureCallback, true);body.addEventListener('click', captureCallback, true);table.addEventListener('click', captureCallback, true);tbody.addEventListener('click', captureCallback, true);secondTr.addEventListener('click', captureCallback, true);firstTd.addEventListener('click', captureCallback, true);
运行结果:
可以发现目标元素的冒泡事件先于捕获事件执行,其它元素顺序不变。也就是说,绑定顺序只影响到目标元素的事件发生顺序。
转载地址:https://deniro.blog.csdn.net/article/details/106456740 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2024年04月17日 18时37分25秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Java Set集合 HashSet TreeSet
2019-04-30
Java Map集合
2019-04-30
ASCII、ISO-8859-1和GB系列编码
2019-04-30
Unicode及UTF-8、UTF-16、UTF-32
2019-04-30
UCS-2、UCS-4
2019-04-30
Unicode和UCS
2019-04-30
Java如何给ServerSocket绑定指定IP地址
2019-04-30
IPv4地址的分配原理
2019-04-30
IP地址0.0.0.0表示什么
2019-04-30
ps命令和客户端显示结果详细解释
2019-04-30
进程间的通信和管道
2019-04-30
父子进程使用mmap进程间通信
2019-04-30
C++基础知识一
2019-04-30
C++基础知识二
2019-04-30
百度昆仑芯片独立背后,或向汽车芯片发起进军
2019-04-30
月活达10亿后,未来快手的“无限”可能
2019-04-30
关于回调注销问题的总结
2019-04-30
Android学习开发路线图
2019-04-30
开发Android主攻四大方向
2019-04-30
Android开发方向
2019-04-30