在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的。Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得;另一个是在DOM节点上绑定的事件,例如click,dblclick,mouseenter等,以及事件在DOM节点中的传播。今天我们主要就javascript中事件流的传播过程以及不同DOM级事件处理程序进行讲解。

事件流

事件流可以理解为事件在页面的DOM节点之间传播的顺序,主要分为三个过程,分别是:事件捕获阶段 --> 事件目标阶段 --> 事件冒泡阶段,从下图可以看出事件的传播过程

DOM的事件流

  • 事件捕获

事件捕获的思想是页面上最外层的节点先接收事件,然后向内层元素逐级传播。例如上面的例子中,事件捕获阶段的传播顺序为:window --> document --> html --> body --> table --> tbody --> tr --> td

  • 事件冒泡

事件冒泡和事件捕获刚好相反,它的思想是让最内层节点先接收事件,然后向外层逐级传播。上面的例子中,事件冒泡阶段传播顺序为:td --> tr --> tbody --> table --> body --> html --> document --> window

  • 事件目标阶段

不管在事件传播阶段还是在事件冒泡阶段,都必然经历事件目标阶段,表示对DOM节点的事件进行处理

事件处理程序

事件处理程序实际上就是绑定在DOM节点上的事件函数。在W3C标准中,分为DOM0,DOM2和DOM3,而在DOM1中没有定义事件相关内容,因此没有DOM1级事件模型。

DOM0级事件模型

通过将函数直接赋值给事件处理属性,在DOM0中只支持事件冒泡的过程

DOM0事件处理程序

DOM2级事件处理程序

在DOM2中,事件处理过程会通过不同的参数配置来决定是采用事件捕获还是事件冒泡,还是两个过程都执行。由于浏览器的不同,DOM2中事件绑定方法也不一样

  • IE浏览器

在IE10及以下版本的浏览器中,只支持事件冒泡,而在IE11中又添加了对事件捕获的支持。在IE10及以下版本中,通过下列方法添加或删除事件

IE10以下事件处理程序

  • 非IE浏览器

非IE的事件处理程序

通过useCapture参数来确定采用哪种方式,true表示事件捕获,false表示事件冒泡,默认状态为false。

IE和非IE浏览器的比较

  • 相同点

(1)支持同一个元素上绑定多个事件处理函数

多个事件处理函数

(2)不能删除匿名函数,删除时必须和绑定的函数一致

不能删除匿名函数

  • 不同点

(1)在使用attachEvent方法为同一个事件添加多个函数时,执行顺序与绑定的顺序相反

attachEvent绑定事件

(2)attachEvent执行的作用域指向全局环境,因此this指向window;而addEventListener执行的作用域在DOM元素内部,因此this指向绑定的元素

  • 兼容性处理

兼容性处理

DOM3级事件处理程序

DOM3在保留了DOM2特性的基础上,添加了一些新方法。最大的改进就是DOM3允许自定义事件,通过createEvent()方法完成,返回的方法通过initCustomEvent()方法来初始化。

DOM3自定义事件

上述例子表示,创建一个冒泡事件'myEvent',然后绑定在div和document上,因为采用事件冒泡,因此会先alert出‘div myEvent’,再输出‘document myEvent’。

总结

以上是一些关于Event的事件流和不同DOM级事件处理程序知识的介绍,希望对大家有用。

JS事件流与DOM事件处理程序的更多相关文章

  1. JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

    事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...

  2. DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

    前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = ...

  3. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  4. IE和DOM事件流、普通事件和绑定事件的区别

    IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...

  5. [已转移]IE事件流和DOM标准事件流的区别

    该文章已转移到博客:https://cynthia0329.github.io/ 1.执行的顺序不一样 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型 ...

  6. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  7. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  8. Js事件分发与DOM事件流

    这一篇比较透彻:https://www.jianshu.com/p/dc1520327022 点击了目标节点后,捕获阶段里事件会从外向目标传递:到了目标阶段,捕获和冒泡的执行顺序按照事件被定义的先后顺 ...

  9. js和jquery的DOM事件大全

随机推荐

  1. 【模板】manacher算法

    传送门 某篇好文章 #include <cstdio> #include <cstring> #define N 22200000 #define min(x, y) ((x) ...

  2. POJ1201:Intervals【差分约束】

    题目大意:给出N个闭区间,每个区间给出一个ci值,让你找出最小的数集Z使得每个闭区间都有不少于ci个Z中的元素,求card(Z) 思路:06年集训队论文<浅析差分约束系统>有详细的解题,设 ...

  3. [NOIP2001] 提高组 洛谷P1024 一元三次方程求解

    题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...

  4. 《effective C++》:条款36——绝不重新定义继承而来的非虚函数

    (1)当派生类中重写了基类的非虚函数时,这个时候这个函数发生的是静态绑定 下面中的代码中: 定义一个基类B,基类定义了函数fcm,fcm是非虚的函数. 定义一个派生类D,派生类重新定义了fcm. 当用 ...

  5. hdu 1728 逃离迷宫 [ dfs ]

    传送门 逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  6. oc温习三:常用函数

    参考文章: 算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = rand()P; //0-49之间的随 ...

  7. C. Wilbur and Points---cf596C

    http://codeforces.com/problemset/problem/596/C 题目大意:  给你n个数对  确保如果(x,y)存在这个集合  那么  0<=x'<=x &a ...

  8. 动态规划:HDU 1114 Piggy-Bank

    Problem Description Before ACM can do anything, a budget must be prepared and the necessary financia ...

  9. 洛谷——P1262 间谍网络

    P1262 间谍网络 题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美元,他们就愿意 ...

  10. Ubuntu 16.04安装QQ(不一定成功)

    注意1:如果是刚新装的系统,可以正常安装,但是,如果你已经装了很多软件,千万不要安装,因为会把系统上一般的依赖包和你之前装的软件全部卸载掉!甚至将桌面Dock都会卸载!最终只能重装Ubuntu解决. ...