dom事件流与事件委托

最新推荐文章于 2023-07-05 22:21:38 发布

颖颖丫

最新推荐文章于 2023-07-05 22:21:38 发布

阅读量120

点赞数

文章标签： dom

本文链接：https://blog.csdn.net/l_y_h___/article/details/120578879

版权

本文介绍了JavaScript事件处理的三个阶段：捕获阶段、处于目标阶段和冒泡阶段，并讲解了addEventListener方法的默认执行顺序。重点讨论了事件委托的概念，通过将事件绑定到父元素，实现对后代元素事件的统一处理，以此提高代码效率和性能。示例代码展示了如何使用事件委托实现在<ul>列表中，点击链接时触发祖先元素的事件处理函数。

摘要由CSDN通过智能技术生成

事件流3个阶段：

捕获阶段
处于目标阶段
冒泡阶段

addEventListener方法默认就是从冒泡阶段执行事件处理程序，一个对象可以绑定多个事件。false

btn2.addEventListener('click',function(){
     alert('22')
},false)

事件委托：委托给父元素

将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

<ul id="u1">
        <li><a href="javascript:;" class="link">超链接1</a></li>
        <li><a href="javascript:;" class="link">超链接2</a></li>
        <li><a href="javascript:;" class="link">超链接3</a></li>

    </ul>
<script>
u1.onclick = function(event){
   if(event.target.className == 'link'){
       alert('111')
   }
                
}
</script>