Javascript中的事件捕获、事件冒泡与事件委托

看以下简单的三层div结构。

<div id="grandparent"><div id="parent"><div id="child"></div></div>
</div>

根据以上三层div嵌套结构，我来根据我的理解解释下什么叫事件捕获、事件冒泡、事件委托。

事件捕获：触发事件时，事件会从父元素到子元素先后响应。想象一下，你点击child元素时，是不是同时点击了parent和grandparent元素，那么他们都会响应你的点击事件，且响应的顺序是先父后子。

事件冒泡：事件冒泡和事件捕获恰巧相反，当你点击child时，事件的响应顺序是先子后父。

事件委托：事件委托应用了事件冒泡的原理，即当你想给child元素添加事件时，你可以将事件添加到parent甚至更高层的祖先元素上。

接下来你可能会想，既然事件冒泡和事件捕获是相反的两种事件处理机制，那么那种到底会生效呢？

所有现代浏览器都支持事件冒泡，事件捕获在一些较老的浏览器中不支持，所以你可以放心的使用事件冒泡，当然浏览器的默认机制也是事件冒泡。

既然事件会在文档树上冒泡或捕获，那如何控制它呢？比如现在我就想在点击child时，只有child响应事件。那么事件对象是你必须懂得的。

事件对象：在触发DOM上的某个事件时，会产生一个对象event，它保存着所有与事件相关的信息。事件对象的stopPropagation()方法可以取消事件的捕获或冒泡。例如：

<script>var obj = document.getElementById("child");obj.onclick = function(event){event.stopPropagation();};
</script>

最后介绍下事件委托在什么情况下会用的比较多。

1.当你要给非常多的元素指定相同的事件处理程序时。比如你要给一个ul>li*50指定事件时，就可用事件委托，将事件委托给ul而不是直接指定到li上。

2.当页面是实时更新内容时。比如通过scroll事件动态加载图片时，由于新加载的文档内容不会响应事件（因为事件处理程序只会添加到在添加事件时已经存在的元素上）所以我们可以在指定事件时指定到包含图片的父元素上。

Javascript中的事件捕获、事件冒泡与事件委托相关推荐

JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇先来看一段实例: js: var $input = document. ...
事件捕获、冒泡的工作原理
事件捕获.冒泡的工作原理什么是事件流什么是事件冒泡? 什么是事件捕获图解什么是事件流事件流是指从页面中接收事件的顺序.也就是说,当一个事件产生时,这个事件的传播过程就是事件流. 什么是事件冒 ...
JavaScript 中的内存和性能、模拟事件（读书笔记思维导图）
由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...
JS7day(事件对象，事件流，事件捕获和冒泡，阻止事件流动，事件委托，学生信息表案例)
文章目录事件对象获取事件对象部分常用属性事件流事件捕获概念: 事件冒泡概念: 阻止事件流动: 相同的鼠标经过事件: 两种(监听事件)注册事件的区别: 传统on注册(L0) 事件监听注册(L2 ...
事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮
clientX/Y 可视区的鼠标坐标全兼容 offsetX/Y 鼠标坐标到物体边框的距离 IE+Chrome page ...
JavaScript中几个不常用的绑定事件
目录一.fullscreenchange事件二.pagehide事件三.pageshow事件四.hashchange事件五.online事件六.offline事件七.popstate事件 ...
Silverlight实用窍门系列：35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】...
Silverlight中的事件分为普通事件和冒泡路由事件,它并没有包括WPF中的隧道路由事件,在本章中将详细讲解冒泡路由事件和如何注册一个冒泡路由事件. 一.细解冒泡路由事件冒泡路由事件可以比喻为: ...
html下拉框onchange事件,javascript 中select标签上放入onchange事件的两种方式分享
摘要: 下文讲述在html标签select上放入onchange事件的方式分享,如下所示: 例1: maomao365.com js select上直接使用onchange的方法 function s ...
JavaScript中的BOM操作之浏览器常见事件
①click点击事件 <body> <div id="d">我是div</div> <script> //直接绑定事件处理函数 d. ...
javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

Javascript中的事件捕获、事件冒泡与事件委托

Javascript中的事件捕获、事件冒泡与事件委托相关推荐

最新文章

热门文章