案例一：直接添加事件監(jiān)聽(tīng)器
，我們來(lái)看一個(gè)簡(jiǎn)單的示例，該示例直接在元素上添加事件監(jiān)聽(tīng)器。假設(shè)我們有一個(gè)頁(yè)面上的按鈕，點(diǎn)擊按鈕時(shí)會(huì)顯示一個(gè)消息框。
// HTML
<button id="myButton">點(diǎn)擊我</button>
<br>
// JavaScript
document.getElementById('myButton').addEventListener('click', function() {
alert('Hello!');
});這段代碼看起來(lái)沒(méi)什么問(wèn)題，但實(shí)際上它無(wú)法正常工作。這是因?yàn)樵诖a執(zhí)行時(shí)，按鈕元素還未被添加到DOM樹(shù)中，所以事件監(jiān)聽(tīng)器無(wú)法正確地被綁定。為了解決這個(gè)問(wèn)題，我們需要等到DOM樹(shù)完全加載后再添加事件監(jiān)聽(tīng)器。
案例二：使用事件委托
接下來(lái)，我們來(lái)看一個(gè)采用事件委托的代碼示例。事件委托是一種將事件監(jiān)聽(tīng)器添加到其父元素上，通過(guò)判斷目標(biāo)事件的來(lái)源元素來(lái)執(zhí)行不同的操作的技術(shù)。
// HTML
<ul id="myList">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
<br>
// JavaScript
document.getElementById('myList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('你點(diǎn)擊了列表項(xiàng)：' + event.target.textContent);
}
});在這個(gè)例子中，我們給包裹列表項(xiàng)的 ul 元素添加了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器。當(dāng)用戶(hù)點(diǎn)擊某個(gè)列表項(xiàng)時(shí)，我們可以通過(guò) event 對(duì)象的 target 屬性來(lái)獲取到實(shí)際觸發(fā)事件的元素。然后，我們根據(jù)該元素的標(biāo)簽名進(jìn)行判斷，并執(zhí)行相應(yīng)的操作。這種方式可以避免為每個(gè)列表項(xiàng)分別添加事件監(jiān)聽(tīng)器，提高了性能和代碼的可維護(hù)性。
案例三：使用事件代理
最后，我們來(lái)看一個(gè)使用事件代理的例子。事件代理也是一種通過(guò)將事件監(jiān)聽(tīng)器添加到父元素上的技術(shù)，但它主要用于處理動(dòng)態(tài)創(chuàng)建的元素或元素?cái)?shù)量較多的情況。
// HTML
<ul id="myList"></ul>
<br>
// JavaScript
var myList = document.getElementById('myList');
myList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('你點(diǎn)擊了列表項(xiàng)：' + event.target.textContent);
}
});
<br>
// 動(dòng)態(tài)添加列表項(xiàng)
for (var i = 1; i <= 10; i++) {
var li = document.createElement('li');
li.textContent = '項(xiàng)目' + i;
myList.appendChild(li);
}在這個(gè)例子中，我們給 ul 元素添加了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器，并在事件處理程序中判斷點(diǎn)擊的元素是否為列表項(xiàng)。然后，我們通過(guò)循環(huán)動(dòng)態(tài)創(chuàng)建了 10 個(gè)列表項(xiàng)，并添加到了 ul 元素中。這樣就可以確保無(wú)論添加多少個(gè)列表項(xiàng)，它們都能正確地觸發(fā)點(diǎn)擊事件的處理程序。
通過(guò)以上的案例解釋?zhuān)覀兛梢钥吹皆诮壎ㄊ录O(jiān)聽(tīng)器時(shí)需要注意正確的時(shí)機(jī)和位置。如果元素尚未加載到DOM樹(shù)中，直接添加事件監(jiān)聽(tīng)器可能無(wú)效。使用事件委托和事件代理可以解決動(dòng)態(tài)元素的事件處理問(wèn)題，并提高性能和代碼的可維護(hù)性。最后，我們應(yīng)該根據(jù)具體的需求來(lái)選擇最適合的事件處理方式，在實(shí)際開(kāi)發(fā)中靈活運(yùn)用。