JZTXT

事件委托

发布时间 2023-03-30 19:20:41作者: 1502god

？

利用冒泡原理，解决同个父级标签下子级标签点击后都会到父级上触发的技巧
优点：

  • 减少事件监听注册次数，提高性能
  • e.target 获得冒泡源对象（即刚刚点击的子级DOM对象）
  • e.target.tagName 获得冒泡源的标签名 （如 OL、UL、LI 是大写的标签名）
  • HTML上自定义id <li data-id="2"> , js 上拿到id const i = e.target.dataset.id

tab 用时间委托实现

<!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>
        <style>
            ul {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
            .select {
                color: pink;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li data-id="0">第一个</li>
            <li data-id="1">第二个</li>
            <li data-id="2">第三个</li>
        </ul>


        <script>
            const ul = document.querySelector('ul')
            ul.onclick = function (e) {
                if(document.querySelector('ul .select')){
                    document.querySelector('ul .select').classList.remove('select')
                }
                e.target.classList.add('select')
                console.log(e.target.dataset.id);

            }

        </script>
    </body>
</html>