事件委派的理解

最新推荐文章于 2024-08-06 11:04:55 发布

原创最新推荐文章于 2024-08-06 11:04:55 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

事件的委派event.target，可以用来对事件进行委派，对于多重复节点的同种事件绑定很有用，可以获取到触发事件的节点。

委派的依据

委派的依据是什么，为什么可以获取到触发的节点，我尝试测试了一下，发现如果给触发的节点添加禁止冒泡就会发现target无法指向触发节点，所以target指向的依据可能就是寻找事件冒泡的触发节点，然后指向他，所以委派无法添加在onmouseenter和onmouseleave中的原因

笔记代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <ul>
        <li>
            <ul class="ul">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>这是第02</li>
        <li>这是第03</li>
        <li>这是第04</li>
        <li>这是第05</li>
        <li>这是第06</li>
    </ul>
    <script>
        /*
            在大批量节点绑定同一个函数或者需要使用动态添加的时候使用事件委派就可以极大的简化代码
            //e.target获取到的是第一个触发函数的节点,获取方法是根据冒泡
        */  // 使用e.currentTarget就只会获取到绑定了事件的节点不会获取到子节点

        //**********猜想,使用这个方法对于事件的捕获会不会有新的反应,比如点击父元素,子元素的target会获取到父元素
        var lis = document.querySelectorAll("li")
        var ul = document.querySelector("ul")
        var ulon = document.querySelector(".ul")

        // 给li都添加log使得点击可视化
        lis.forEach(function (item, index) {
            item.onclick = function () {
                console.log(index);
            }
        });

        ul.onclick = function (e) {
            // e.target获取到的是触发改事件的节点,获取的依据就是事件的冒泡,
            // target会获取到冒泡的触发事件当作target指向的位置
            // console.log(e.target);
            //currentTarget获取的就会一直是绑定事件的节点,不需要判断,只要触发就会指向绑定
            console.log(e.currentTarget);
        }
        ulon.onclick = function (e) {
            console.log("ss");
            //使用阻止冒泡就会使target的获取无效
            e.stopPropagation()
        }

    </script>
</body>

</html>