阅读量:2
事件委托是一种在父元素上监听事件，然后根据事件目标来执行相应操作的技术。使用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元素，如果是则执行相应操作。这样就实现了事件委托的功能。
