事件委托

最新推荐文章于 2024-08-13 15:54:37 发布

跌打的小脆骨

最新推荐文章于 2024-08-13 15:54:37 发布

阅读量516

点赞数

分类专栏： js 文章标签：事件委托

本文链接：https://blog.csdn.net/littleCucumber/article/details/100057756

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js委托事件的概述与作用

addEventListener直接绑定新的元素会报dom不存在的错误吗？肯定是会的
事件委托(代理)：未来还不清楚会创建多少个节点，所以没办法实现给他们注册事件

先把事件委托的作用写一下。

1.支持为同一个DOM元素注册多个同类型事件
2.可将事件分成事件捕获和事件冒泡机制

问题：一般的注册事件，后面的会覆盖前面的（addEventListener(type,listener,useCapture）可以避免这种情况

type: 必须,String类型,事件类型（去掉on）
listener: 必须,函数体或者JS方法
useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段

事件捕获和事件冒泡机制

1.事件捕获
当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
2、事件冒泡
当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件
在这里插入图片描述

事件委托和新增节点绑定事件的关系？

事件委托的优点:

1.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2.动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            line-height: 30px;
            margin: 3px 0;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<button>创建4个移民li</button>
<ul>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
</ul>
<script>

    var liArr = document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    var btn = document.getElementsByTagName("button")[0];

    btn.onclick = function () {
        for(var i=1;i<=4;i++){
            var newLi = document.createElement("li");
            var newA = document.createElement("a");
            newLi.innerHTML = "我是移民li";
            newA.innerHTML = "我是移民a";
            newA.href = "#";
            ul.appendChild(newLi);
            ul.appendChild(newA);
        }
    }
//利用事件委托
    ul.onclick = function (event) {
        //获取事件触动的时候传递过来的值
        event = event || window.event;
        var aaa = event.target?event.target:event.srcElement;
        //判断标签名，如果是li标签弹窗
        if(aaa.tagName === "LI"){
            alert("我是li");
        }
    }
</script>

</body>
</html>

在这里插入图片描述