DOM 事件委托事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。也就是：利用冒泡的原理，把

什么是事件委托？

事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。

也就是：利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。使用事件委托技术能让你避免对特定的每个节点添加事件监听器。

优点

省监听数(内存)
可以监听动态元素

代码示例

场景一

你要给10个按钮添加点击事件,咋办？

答:监听祖先,等点击的时候看看是不是我想要监听的元素即可

同时给多个事件添加点击事件

需要同时给多个事件添加监听，我们只需要对他的父元素进行监听，等到冒泡的时候判断target是不是这里面的其中一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <span>span标签</span>
        <button>button1</button>
        <button>button2</button>
        <button>button3</button>
        <button>button4</button>
        <button>button5</button>
        <button>button6</button>
        <button>button7</button>
        <button>button8</button>
        <button>button9</button>
        <button>button10</button>
    </div>
    <script>
        div1.addEventListener('click',(e)=>{
            const t = e.target
            if(t.tagName.toLowerCase() === 'button'){
                console.log('button 被点击了')
            }
        })
    </script>
</body>
</html>

场景二

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

答:监听祖先,等点击的时候看看是不是我想要监听的元素即可

给当前不存在的元素的元素添加点击事件

同样先要监听父级元素，等点击的时候看看是不是我想要监听的元素即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
    </div>
    <script>
        setTimeout(() => {
            const button = document.createElement('button')
            button.textContent = 'click 1'
            div1.appendChild(button)
        },1000)
        
        div1.addEventListener('click',(e)=>{
            const t = e.target
            if(t.tagName.toLowerCase() === 'button'){
                console.log('button 被点击了')
            }
        })
    </script>
</body>
</html>

阻止默认动作

        e.preventDefault()

阻止事件冒泡

　　　　e.stopPropagation()