024.事件冒泡/事件代理 · 每天一道面試題

~~~ <body> <div id="div1"> <p id="p1">激活</p> <p id="p2">取消</p> <p id="p3">取消</p> <p id="p4">取消</p> </div> <div id="div2"> <p id="p5">取消</p> <p id="p6">取消</p> </div> </body> ~~~ 對于以上 HTML 代碼結構，要求點擊`p1`時候進入激活狀態，點擊其他任何`<p>`都取消激活狀態，如何實現？代碼如下，注意看注釋： ~~~ var body = document.body bindEvent(body, 'click', function (e) { // 所有 p 的點擊都會冒泡到 body 上，因為 DOM 結構中 body 是 p 的上級節點，事件會沿著 DOM 樹向上冒泡 alert('取消') }) var p1 = document.getElementById('p1') bindEvent(p1, 'click', function (e) { e.stopPropagation() // 阻止冒泡 alert('激活') }) ~~~ 如果我們在`p1``div1``body`中都綁定了事件，它是會根據 DOM 的結構來冒泡，從下到上挨個執行的。但是我們使用`e.stopPropagation()`就可以阻止冒泡 > 題目：如何使用事件代理？有何好處？ ### 事件代理我們設定一種場景，如下代碼，一個`<div>`中包含了若干個`<a>`，而且還能繼續增加。那如何快捷方便地為所有`<a>`綁定事件呢？ ~~~ <div id="div1"> <a href="#">a1</a> <a href="#">a2</a> <a href="#">a3</a> <a href="#">a4</a> </div> <button>點擊增加一個 a 標簽</button> ~~~ 這里就會用到事件代理。我們要監聽`<a>`的事件，但要把具體的事件綁定到`<div>`上，然后看事件的觸發點是不是`<a>`。 ~~~ var div1 = document.getElementById('div1') div1.addEventListener('click', function (e) { // e.target 可以監聽到觸發點擊事件的元素是哪一個 var target = e.target if (e.nodeName === 'A') { // 點擊的是 <a> 元素 alert(target.innerHTML) } }) ~~~ 我們現在完善一下之前寫的通用事件綁定函數，加上事件代理。 ~~~ function bindEvent(elem, type, selector, fn) { // 這樣處理，可接收兩種調用方式 bindEvent(div1, 'click', 'a', function () {...}) 和 bindEvent(div1, 'click', function () {...}) 這兩種 if (fn == null) { fn = selector selector = null } // 綁定事件 elem.addEventListener(type, function (e) { var target if (selector) { // 有 selector 說明需要做事件代理 // 獲取觸發時間的元素，即 e.target target = e.target // 看是否符合 selector 這個條件 if (target.matches(selector)) { fn.call(target, e) } } else { // 無 selector ，說明不需要事件代理 fn(e) } }) } ~~~ 然后這樣使用，簡單很多。 ~~~ // 使用代理，bindEvent 多一個 'a' 參數 var div1 = document.getElementById('div1') bindEvent(div1, 'click', 'a', function (e) { console.log(this.innerHTML) }) // 不使用代理 var a = document.getElementById('a1') bindEvent(div1, 'click', function (e) { console.log(a.innerHTML) }) ~~~ 最后，使用代理的優點如下： * 使代碼簡潔 * 減少瀏覽器的內存占用