关于js_事件委托(代理)的介绍和简单使用

最新推荐文章于 2024-07-24 11:09:48 发布

NewBurlaSKing

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量126

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_55961861/article/details/126352983

版权

javascript 开发语言 html

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js_事件委托(代理)

一.定义

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

二.实例

<!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 id="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <p>hhh</p>
    </ul>
    <script>
        var l = document.getElementById('list');
        l.addEventListener('click',function(e) {
            if (e.target.tagName.toLowerCase() === 'li') {
                console.log(e.target.innerHTML);
            }
        })
    </script>
</body>
</html>