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

最新推荐文章于 2024-02-08 07:45:00 发布

正在输入代码中

最新推荐文章于 2024-02-08 07:45:00 发布

阅读量4.6k

点赞数

分类专栏： web前端文章标签： web 源码实例 delegate javascript

本文链接：https://blog.csdn.net/qq_26744901/article/details/51703006

版权

web前端专栏收录该内容

145 篇文章 0 订阅

订阅专栏

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").οnclick=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>

正在输入代码中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js委托事件-addEventListeners（冒泡方向）

JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。实例：给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx"); Title 11111 2222xxxx document.getElementById("div").addE
复制链接

扫一扫