事件委托是一種在父元素上監聽事件,然后根據事件目標來執行相應操作的技術。使用addEventListener可以很方便地實現事件委托。
下面是一個簡單的示例,演示如何使用addEventListener做事件委托:
<!DOCTYPE html>
<html>
<head>
<title>事件委托示例</title>
</head>
<body>
<ul id="parentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// 獲取父元素
var parentList = document.getElementById('parentList');
// 添加事件監聽器
parentList.addEventListener('click', function(event) {
// 判斷觸發事件的目標元素是否為li元素
if (event.target.tagName === 'LI') {
// 執行相應操作
console.log('You clicked on ' + event.target.innerText);
}
});
</script>
</body>
</html>
在上面的示例中,我們首先獲取了父元素parentList
,然后在父元素上添加了一個click事件監聽器。當點擊父元素內的任何一個子元素時,事件會冒泡到父元素,然后在事件監聽器中判斷觸發事件的目標元素是否為li元素,如果是則執行相應操作。這樣就實現了事件委托的功能。