js委托事件-addEventListeners（冒泡方向）

最新推荐文章于 2024-06-19 14:30:50 发布

weixin_34191845

最新推荐文章于 2024-06-19 14:30:50 发布

阅读量79

点赞数

文章标签： javascript ViewUI

本文介绍了在前端开发中如何利用事件委托实现对新增元素的事件绑定，通过具体实例展示了事件冒泡机制的工作原理，包括从子元素到父元素及从父元素到子元素的不同冒泡方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。

实例：

给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx");

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p>11111</p>
<p>2222</p>
</div>
<button id="btn">xxxx</button>
<script>
document.getElementById("div").addEventListener("click",function(e){
if(e.target.nodeName=="P"){
alert("xxx")
}
})
document.getElementById("xx").onclick=function(){
var p = document.createElement("p");
p.innerHTML="333";
document.getElementById("btn").appendChild(p);
}
</script>
</body>
</html>

冒泡方式分为2种，一种是由子元素向上冒泡，一种是由父元素向下冒泡

在使用addEventListeners的时候有第三个参数true和flase；默认是flase，由子元素向上冒泡

当我们设置为true的时候就会由父元素向下冒泡

实例：

[html] view plain copy

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. </head>
7. <body>
8. <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
9. <div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div>
10. </div>
11. <script>
12. document.getElementById("id1").addEventListener('click',function(){
13. console.log("id1");
14. },true)
15. document.getElementById("id2").addEventListener('click',function(){
16. console.log("id2");
17. },true)
18. </script>
19. </body>
20. </html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。