Press "Enter" to skip to content

JavaScript事件流模型

事件流

捕获流

捕获流最早由网景公司开发的浏览器使用,在如下结构中

<div>
<button type='submit'></button>
</div>
div = document.querySelector('div');
div.onclick = function(event){
    alert('div');
};
button = document.querySelector('button');
button.onclick = function(event){
    alert('button');
}

倘若对button进行点击,在事件捕获模式下div和button都会弹出,而
且是先弹出div再弹出button,这是为什么呢?
在捕获模式的定义中,当事件发生时,该事件由高层次向低层次传递。
当你点击button时,同时也点击了div。而且是相当于先点击了div(高层次)又点击了button(低层次)。

冒泡流

冒泡流由微软公司最早使用,它是一种与上述捕获流截然相反的一种机制。
在冒泡流的定义中,当事件发生时,该事件由低层次向高层次传播(像是水泡向上冒出)。
同样是上面的例子,当点击button时,会先弹出button(低层次)再弹出div(高层次)。

DOM中的事件流

DOM2级综合了上述两个过程,将事件流分为两个过程三个阶段。
当事件发生时,事件由捕获过程->冒泡过程,即由捕获阶段->处于目标对象阶段->冒泡阶段组成。
这里的处于目标对象阶段就是上文中事件处于button阶段(对button做了真实点击)。
注意:处于目标对象阶段和冒泡阶段同属于冒泡过程。

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax