事件委托:通过事件委托给子元素注册事件的用法与好处!!!

最新推荐文章于 2023-03-16 15:57:10 发布

awei0117

最新推荐文章于 2023-03-16 15:57:10 发布

阅读量254

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/awei0117/article/details/127857281

版权

目标:能够掌握事件委托

原理:利用事件冒泡的特点, 将事件注册委托给父元素

事件冒泡:事件流动的路径由内到外

需求:通过ul给每个li注册事件

<!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>事件委托</title>
</head>

<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <p>1212</p>
    </ul>
    <script>
        // 1.老办法:获取获取所有的li  循环注册
        // const lis = document.querySelectorAll('ul li')
        // for (let i = 0; i < lis.length; i++) {
        //     lis[i].addEventListener('click', function () {
        //         console.log('我饿了');
        //     })
        // }


       
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
         // 但是发现点p标签也能触发,  但是我只想给ul 里的 li  注册事件
         // 事件对象.target.tagName   得到 事件触发的这个真正元素
            if (e.target.tagName === 'LI') {
                console.log('我学会了')
            }
        })
    </script>
</body>

</html>

好处:当你通过js方法在标签 'A' 里新添加了一个标签 'B',但你要给标签 'B' 注册事件,因为你是通过js新添加的,没办法获取它的dom元素,就没办法注册事件,这时候事件委托就起到了关键性作用,通过事件冒泡的特点,你可以给新添加的父元素注册事件。