js事件委托

最新推荐文章于 2022-10-22 17:49:50 发布

小番水源

最新推荐文章于 2022-10-22 17:49:50 发布

阅读量231

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43368552/article/details/126599452

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

事件委托是利用事件流的特征解决一些开发需求的知识技巧

总结：

优点：给父级元素添加事件（可以提高性能），不需要给每一个子级添加事件绑定，提高性能。

原理：事件委托其实就是利用事件冒泡的特点，给父元素添加事件，子元素可以触发（由外到里）

实现：事件对象.target可以可以获得真正触发事件的元素

<!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>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>

    <script>
        // 不要每个小li注册事件了    而是把事件委托给它的爸爸
        //  事件委托是给父级添加事件   而不是给 孩子添加事件

        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // alert('我点击了')
            // 得到当前元素    可以使用事件对象

            console.log(e.target);
            e.target.innerHTML = '潘先源'
            //   e.target.innerHTML='潘先源'
            e.target.style.color = 'red'
        })
    </script>
</body>

</html>

小番水源

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js事件委托

原理：事件委托其实就是利用事件冒泡的特点，给父元素添加事件，子元素可以触发（由外到里）优点：给父级元素添加事件（可以提高性能），不需要给每一个子级添加事件绑定，提高性能。实现：事件对象.target可以可以获得真正触发事件的元素。事件委托是利用事件流的特征解决一些开发需求的知识技巧。
复制链接

扫一扫