美文网首页
JavaScript中的事件机制

JavaScript中的事件机制

作者: sonlylee | 来源:发表于2017-03-28 22:35 被阅读0次

在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:监听函数。

removeEventHandler:移除Dom元素的事件

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

事件机制的阻止

阻止事件冒泡:stopPropagation();

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

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

www.jb51.net/article/53438.htm

相关文章

  • JavaScript的事件机制

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(...

  • JavaScript中事件机制

    同级元素点击事件的位置关系 如果两个元素属于同级,且相互重叠,则在上面的可以被点击,下面的点击不到。(主要通过设置...

  • JavaScript 异步编程的几个方法

    原文地址基于浏览器事件轮回机制(以及nodejs中的事件轮询机制),JavaScript常常会运行在异步环境中。而...

  • 详解JavaScript中的Event Loop(事件循环)机制

    详解JavaScript中的Event Loop(事件循环)机制 前言 我们都知道,javascript从诞生之日...

  • js事件深入学习

    JavaScript的事件机制包含,事件绑定、事件监听、事件委托(事件代理)等 js中的事件流 ① .冒泡:当下级...

  • javascript 中的事件机制

    js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...

  • JavaScript中的事件机制

    在JavaScript中,DOM2级事件规定的时间流包括三个阶段: (1)事件捕获阶段 (2)处于目标阶段 (3)...

  • jQuery事件

    1.事件机制jQuery的事件机制,指的是:jQuery对JavaScript操作DOM事件的封装,包括了:事件绑...

  • JavaScript中事件循环机制

    事件循环机制: 在执行上下文的过程中,对函数的入栈和出栈。执行前函数入栈,执行后函数出栈。如若遇到了一些异步...

  • 多个 eventListener, 如何取消

    参考: JavaScript事件机制 背景: 在 taro3.0.2 中, 小程序端使用 onPullDown()...

网友评论

      本文标题:JavaScript中的事件机制

      本文链接:https://www.haomeiwen.com/subject/qmhsottx.html