js委托事件-addEventListeners(冒泡方向)

最新推荐文章于 2024-03-09 23:36:48 发布

zhangge3663

最新推荐文章于 2024-03-09 23:36:48 发布

阅读量453

点赞数

分类专栏： web前端文章标签： jquery html5 html

原文链接：https://www.cnblogs.com/telwanggs/p/6477523.html

版权

web前端专栏收录该内容

24 篇文章 2 订阅

订阅专栏

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

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

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

当我们设置为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:100x; left:100px; background-color:blue; z-index:4">
        <div id="id2" style="width:100px; height:100px; top:20px; left:70x; background-color:green; "></div>
    </div>
    <script>
        document.getElementById("id1").addEventListener('click', function() {

        },true)
        document.getElementById("id2").addEventListener('click', function() {
            console.log("id2");
        },true)
    </script>
</body>
</html>