事件委托

104 阅读1分钟

一、原理

不是每个子节点单独设置事件监听器,而是事件监听在其父亲节点上,必须利用冒泡原理影响设置每个节点

二、例子

场景1

你要给100个按钮做监听事件,咋办?

场景2

你要监听目前不存在的元素的事件,咋办?

<!DOCTYPE>
<html>
<head>
    <meta charset='UTF-8'>
    <title>事件委托</title>
<head>
<body>
    <div class='max'>
        <button class='btn-1'>btn1</button>
        <button class='btn-2'>btn2</button>
        <button class='btn-3'>btn3</button>
                    .
                    . (省略96个button)
                    .
        <button class='btn-100'>btn100</button>
    </div>
    <script>
         /* 监听祖先元素 */
         let btn_max=document.querySelector('.max');
         btn_max.addEventListener('click',()=>{
             const t = e.target;	//为了保存e.target对象,因为它是一个异步的结果,点击后e.target对象就会消失。
             if(e.tagName.toLowerCase()==='button'){
                 console.log('button被点击了');
                 console.log('被点击的button是'+ t.className);	//这样就能知道点击了哪一个button
             }
         })
    </script>
</body>
<html>

三、优点

1.省监听数(减少内存)

2.可以监听动态元素