事件冒泡/捕获 - 它从哪里开始/结束?

时间:2012-09-25 04:14:26

标签: javascript javascript-events event-bubbling

据我所知,事件有两种模式 - 冒泡和捕捉。

当事件设置为冒泡时,Javascript会检查“文档”吗?

当事件设置为捕获时,Javascript是否始终从“文档”开始?

Javascript如何知道停止/启动的位置?

更新

假设我的身体标签中有以下代码。

<div id='outer'>
    <div id='inner'></div>
</div>

当我将一个事件设置为#inner来冒泡时,Javascript会检查文档还是停在#outer?

3 个答案:

答案 0 :(得分:5)

来自W3C Document Object Model Events

我知道我在挑剔但是处理您正在描述的事件不是javascript,而是DOM引擎(文档对象模型)。在浏览器中,javascript和DOM引擎之间存在绑定,以便事件可以传播到javascript,但它不仅限于javascript。例如,MSIE支持BASIC。

  

当事件设置为冒泡时,Javascript会检查“文档”吗?

1.2.3“这种向上传播将持续到包括文档”

“任何事件处理程序都可以选择通过调用Event接口的stopPropagation方法来阻止进一步的事件传播。如果任何EventListener调用此方法,将触发当前EventTarget上的所有其他EventListener,但冒泡将停止在该级别”< / p>

  

当事件设置为捕获时,Javascript是否始终从“文档”开始?

1.2.2“捕获操作从树的顶部开始,通常是文档,”

答案 1 :(得分:2)

事件冒泡

JavaScript会一直检查文档。如果在文档上添加侦听器并在内部添加侦听器,则两个侦听器都会触发。

事件捕获

JavaScript从文档开始,一直到内部。如果在文档上添加侦听器并在内部添加侦听器,则两个侦听器都会触发。


我的发现

原来,浏览器会进行某种智能处理,以便

a)不必循环遍历整个父层次

b)不必遍历所有事件。


证明

a)单击内部div时,浏览器没有时间触发两个点击事件:

Fiddle

b)当存在大量其他事件附加到不在父层次结构中的其他DOM元素时,浏览器没有时间触发单击内部div时的两个点击事件:

Fiddle

答案 2 :(得分:1)

部分答案..

1 - 当事件设置为冒泡时,Javascript会检查“文档”吗?

如果层次结构中的某个元素通过调用stopPropagation()

决定停止冒泡,则不会