js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播
2023-06-13 09:15:15 时间
大家好,又见面了,我是你们的朋友全栈君。
结论
element.addEventListener(event, function[, useCapture])
- event:事件名称,如click
- function:指定要事件触发时执行的函数,可以传入事件参数
- useCapture:可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
默认false
:在冒泡阶段执行指定事件 true:在捕获阶段执行事件
event.stopPropagation():阻止事件传播,用于function(event){}中
图解捕获与冒泡
实例:aa里面有个bb,bb里面有个cc,当点击cc时会发生什么?
实例代码
<div id="aa">
aa
<div id="bb">
bb
<div id="cc">cc</div>
</div>
</div>
function print(e){
console.log(this.id);
}
aa.addEventListener('click',print);//第三个参数默认为false
bb.addEventListener('click',print);
cc.addEventListener('click',print);
div{
display: flex;
align-items: center;
justify-content: center;
}
#aa{
margin:100px 0 0 400px;
background-color: #f0ad4e;
height:300px;
width:300px;
}
#bb{
background-color: #4078c0;
height:200px;
width:200px;
}
#cc{
background-color: #42b983;
height:100px;
width:100px;
}
讲解
- 当点击cc时,按cc>bb>aa依次捕获,再按aa>bb>cc依次冒泡;因为第三个参数(useCapture)默认为false,所以在冒泡阶段执行各自click函数,结果如下:
cc
bb
aa
- 当js修改为
function print(e){
console.log(this.id);
}
aa.addEventListener('click',print,true);//第三个参数默认为false
bb.addEventListener('click',print,true);
cc.addEventListener('click',print,true);
再点击cc时,按cc>bb>aa依次捕获,再按aa>bb>cc依次冒泡;因为第三个参数(useCapture)为true,所以在捕获阶段执行各自click函数,结果如下:
aa
bb
cc
3. 当js修改为
function print(e){
e.stopPropagation();//执行完此函数后,该事件不再继续传播
console.log(this.id);
}
aa.addEventListener('click',print,true);//第三个参数默认为false
bb.addEventListener('click',print,true);
cc.addEventListener('click',print,true);
再点击cc时,捕获cc,执行cc的click函数, 因为print函数中有e.stopPropagation()
,所以执行完该函数后,click事件不再传播.结果如下:
aa
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/234202.html原文链接:https://javaforall.cn
相关文章
- js setCapture() releaseCapture() 获取页面上发生的所有的事件
- [html]js无缝循环滚动图片示例代码
- Js生成二维码_js在线生成二维码
- iframe跨域调用js_ajax跨域访问
- Node.js新手必须知道的4个JavaScript概念详解架构师
- js截取详解编程语言
- js 异步请求后各种监听事件的处理,如异步请求后click 事件失效详解编程语言
- js事件循环、window.setTimeout 延迟执行详解编程语言
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- Redis中的订阅机制及其在JS中的应用(redis 订阅 js)
- 动态为事件添加js代码示例
- 让textarea自动调整大小的js代码
- 关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
- js之onload事件的一点使用心得
- JS实现判断滚动条滚到页面底部并执行事件的方法
- Express.JS使用详解
- Node.js中使用事件发射器模式实现事件绑定详解
- Node.js事件循环(EventLoop)和线程池详解
- asp.net后台动态添加JS文件和css文件的引用实现方法