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

最新推荐文章于 2025-09-03 18:46:42 发布

原创最新推荐文章于 2025-09-03 18:46:42 发布 · 4.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #源码 #实例 #delegate #javascript

web前端专栏收录该内容

143 篇文章

订阅专栏

本文介绍了在前端开发中如何利用事件委托实现对新增元素的事件绑定，并通过实例展示了不同冒泡方式的应用场景。深入探讨了事件委托原理及事件冒泡机制。

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

实例：

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

<!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("btn").onclick=function(){
        var p = document.createElement("p");
        p.innerHTML="333";
        document.getElementById("xx").appendChild(p);
    }
</script>
</body>
</html>

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

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

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
    <div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div>
</div>
<script>
    document.getElementById("id1").addEventListener('click',function(){
        console.log("id1");
    },true)
    document.getElementById("id2").addEventListener('click',function(){
        console.log("id2");
    },true)
</script>
</body>
</html>