事件冒泡：
元素触发事件时，会往上冒泡，触发所有父元素的事件，间接到 body
比方：点击 p 标签，会触发 p，div，body 对应的事件
e.stopPropagation() 能够阻止向上冒泡，即只会触发 p 的对应的事件
<body>
<div id="div1">
<p id="p1"> 事件冒泡 </p>
</div>
<script>
function bindEvent(elem, type, selector, fn) {if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, e=>{
let target
if (selector) {
target = e.target
if (target.matches(selector)) {fn.call(target, e)
}
} else {fn(e)
}
})
}
const p1 = document.getElementById('p1')
const div1 = document.getElementById('div1')
const body = document.body
bindEvent(p1, 'click', e=>{// e.stopPropagation()
alert('p1 事件')
})
bindEvent(body, 'click', e=>{alert('body 事件')
})
bindEvent(div1, 'click', e=>{alert('div1 事件')
})
</script></body>
事件委托：依据事件冒泡原理，给想要加事件元素的父元素减少事件，这样能够大大的缩小浏览器的内存占用
比方点击 a1，或者 a2，都会触发 alert
<body>
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<script>
const div1 = document.getElementById('div1')
div1.addEventListener('click', e=>{e.preventDefault()
const target = e.target
if (target.nodeName === 'A') {alert(target.innerHTML)
}
})
</script></body>