JavaScript中的事件机制

在JavaScript中,DOM2级事件规定的时间流包括三个阶段:

(1)事件捕获阶段

 (2)处于目标阶段

 (3)事件冒泡阶段

事件传播——冒泡与捕获

        DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的 是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

       大多数情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true。

冒泡事件流  

        当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通 过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。

捕获事件流

       事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档 根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何 元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。

W3CDOM

       obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添 加事件的对象,evtype是事件类型,不带on前缀,fn是事件处理函数,如果useCapture是true,则事件处理函数在捕获阶段被执行,否则 在冒泡阶段执行obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法

微软IE方法

        obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象,evtype是事件类型,带on前缀,fn是事件处理函数,IE不支持事件捕获obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法,evtype包含on前缀。

addEventListener:监听Dom元素的事件

target:监听对象; type:监听函数类型,如click,mouseover;func:监听函数。

JavaScript中的事件机制_第1张图片

removeEventHandler:移除Dom元素的事件

target:监听对象; type:监听函数类型,如click,mouseover;func:监听函数。

JavaScript中的事件机制_第2张图片

事件机制的阻止

阻止事件冒泡:stopPropagation();

阻止事件的捕获:DOM3级新增事件stopImmediatePropagation();

这些就是最基本的事件机制的过程!!

www.jb51.net/article/53438.htm

你可能感兴趣的:(JavaScript中的事件机制)