事件冒泡：
元素触发事件时，会往上冒泡，触发所有父元素的事件，间接到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>