JavaScript 事件委托机制

最新推荐文章于 2024-06-10 17:00:16 发布

杏子姐_1024

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量258

点赞数

分类专栏： # JavaScript 基础

本文链接：https://blog.csdn.net/weixin_44135121/article/details/102830960

版权

JavaScript 基础专栏收录该内容

17 篇文章 5 订阅

订阅专栏

JavaScript 事件委托机制

一、概念
二、优点
三、案例

一、概念

JavaScript 事件委托是指将事件注册在父元素上之后，其子元素都具备了该事件的功能。通过addEventListener 来实现事件委托。

二、优点

减少事件注册，节省内存。假设一个 ul 元素下面有 n 个 li 子元素，需给每一个 li 添加点击事件。如果不用事件委托，有几个 li 元素，就需要注册几个事件。但是使用事件委托，就可以将点击事件委托在其父元素 ul 上。那么不管其下面有几个子元素，都可以拥有点击事件。
子元素动态绑定事件。在很多应用场景下，我们会根据用户操作或者调取的接口数据来动态增减子元素。如果不使用事件委托，对动态子元素的绑定和解绑事件处理会比较麻烦。而事件委托可以灵活地实现动态绑定事件，只要给父元素注册了事件，其子元素内部不管怎么动态增加，都具备了该事件的功能，无需考虑绑定和解绑的问题。

三、案例

通过 addEventListener 来实现事件委托。
（1）兼容性
addEventListener 主要用于所有主流浏览器，除了IE8（含）以下版本。
（2）用法
element.addEventListener(event, function, useCapture)；

参数	说明	类型	是否必须
event	指定事件名。不加’on’，如click	String	是
function	指定要事件触发时执行的函数	Function	是
useCapture	指定事件是否在捕获或冒泡阶段执行	Boolean	否

（3）示例

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<ul id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</body>
<script>
    var list = document.getElementById("list");
    list.addEventListener('click',(e)=>{
        console.log(e.target)
    })
</script>
</html>

以上案例，通过将事件委托给父元素，其子元素也都具备了点击事件。如果不使用事件委托，则需要将点击事件添加到每个 li 元素。

使用 addEventListener 事件与直接添加事件的区别
直接添加事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<ul id="list">
    <li id="1">item 1</li>
</ul>
</body>
<script>
    var id1= document.getElementById("1");
    id1.onclick = ()=>{
        console.log('事件1')
    };
    id1.onclick = ()=>{
        console.log('事件2')
    };
</script>
</html>

输出结果：
在这里插入图片描述
通过结果可以看出，直接通过 onclick 的形式绑定事件，在绑定多个事件时，最后一次事件会覆盖前面的事件。这样如果我们对同一类型的事件有多种事件处理时就不使用。

通过 addEventListener 方式添加事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<ul id="list">
    <li id="1">item 1</li>
</ul>
</body>
<script>
    var id1= document.getElementById("1");
    id1.addEventListener('click',()=>{
        console.log('事件1')
    });
    id1.addEventListener('click',()=>{
        console.log('事件2')
    });
</script>
</html>

输出结果：

在这里插入图片描述
通过结果可以看出，绑定的两次事件都执行了。

事件冒泡
事件冒泡是事件由下至上的执行。就像一个泡泡，会慢慢地向上延伸。即从当前目标元素开始执行，再执行父元素事件，上层元素事件，直到 body 事件, document 事件, window 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<ul id="list">
    <li id="1">item 1</li>
</ul>
</body>
<script>
    var list = document.getElementById("list");
    var id1= document.getElementById("1");
    id1.addEventListener('click',(e)=>{
        console.log('id1',e.target)
    });
    list.addEventListener('click',(e)=>{
        console.log("list",e.target)
    });
</script>
</html>

addEventListener 的第三个参数默认为false，可以不写。此时是事件冒泡。以上案例中，先输出 id1，再输出 list。

在这里插入图片描述
事件捕获
事件捕获是事件由上至下的执行。即先执行顶层对象 window 事件，再执行 document 事件， body 事件直到当前目标事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<ul id="list">
    <li id="1">item 1</li>
</ul>
</body>
<script>
    var list = document.getElementById("list");
    var id1= document.getElementById("1");
    id1.addEventListener('click',(e)=>{
        console.log('id1',e.target)
    });
    list.addEventListener('click',(e)=>{
        console.log("list",e.target)
    },true);
</script>
</html>