事件冒泡Vs.事件捕捉

事件是一个用户的行为或者是由程序确定的事情。它们是网页和JavaScript的互动。当特殊的事件发生的时候,事件可以被监听器所描述。 一个元素里面的元素发生了一个事件,并且两个元素都已经注册了那个事件的处理句柄。

如果有三个元素FORM, DIV 和 PARAGRAPH。 DIV 在 FORM里面,PARAGRAPH在DIV里面,我们绑定一个称为onClick的事件句柄在这两个元素上。 当我们点击PARAGRAPH时,三个元素的事件句柄将被执行。问题的关键在于事件会按照何种顺序执行。如果先执行PARAGRAPH的,则称为冒泡,如果先执行FORM的,则称为捕捉。每个W3C,事件都开始于捕捉阶段,一直到目标元素返回,并且开始冒泡。

Event 冒泡

冒泡,就是事件的捕捉和处理从最内层的元素开始,依次进行到外面的元素。仅仅特定的事件能冒泡。事件有可以确定能冒泡的属性。可以根据这个属性检查一个事件是否允许冒泡。目前,全部的现代浏览器都将事件冒泡作为默认的事件流路径。

源程序

<form onclick="alert('Event from form')" style="border: 2px solid blue;width:200px ; ">
form
<div onclick="alert('Event from div')" style="border: 2px solid green;width:150px ; ">
DIV
</div>
</form>

事件捕捉

事件捕捉就是指事件从顶级元素开始一直到目标元素.现在的浏览器默认不支持事件捕捉,但是我们可以利用JavaScritp代码来完成.

原文链接