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

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

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

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

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

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

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

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


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

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


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

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

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

你可能感兴趣的:(JavaScript)