如何使用addEventListener做事件委托

   2024-10-09 9340
核心提示:事件委托是一种在父元素上监听事件,然后根据事件目标来执行相应操作的技术。使用addEventListener可以很方便地实现事件委托。下

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

 
举报打赏
 
更多>同类维修大全
推荐图文
推荐维修大全
点击排行

网站首页  |  关于我们  |  联系方式网站留言    |  赣ICP备2021007278号