在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. [codeforces538F]A Heap of Heaps

    [codeforces538F]A Heap of Heaps 试题描述 Andrew skipped lessons on the subject 'Algorithms and Data Stru ...

  2. [luoguP1666] 前缀单词(DP)

    传送门 先把所有字符串按照字典序排序一下 会发现有字符串x和y(x再y前面,即字典序小),如果x不是y的前缀,那么在x前面不是x前缀的字符串也不是y的前缀 这样就可以DP了 f[i][j]表示前i个字 ...

  3. 【数学】codeforces C. Maximal GCD

    http://codeforces.com/contest/803/problem/C [题意] 给定两个数n,k(1 ≤ n, k ≤ 10^10) 要你输出k个数,满足以下条件: ①这k个数之和等 ...

  4. Java文件内容读写

    package regionForKeywords; import java.io.*; /** * Created by huangjiahong on 2016/2/25. */ public c ...

  5. 谈谈APP架构选型:React Native还是HBuilder

    原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid ap ...

  6. HDU 5695 Gym Class

    拓扑排序. #include<cstdio> #include <iostream> #include<cstring> #include<cmath> ...

  7. Office WORD里插入图片,嵌入型只能显示一半怎么办

    如下图所示,公式编辑器插入的图片如果用嵌入型只能显示一半,但是改成其他方式即可全部显示   选中有问题的段落,点击设置为单倍行距即可  

  8. FZU 2150 Fire Game (暴力BFS)

    [题目链接]click here~~ [题目大意]: 两个熊孩子要把一个正方形上的草都给烧掉,他俩同一时候放火烧.烧第一块的时候是不花时间的.每一块着火的都能够在下一秒烧向上下左右四块#代表草地,.代 ...

  9. python爬虫(二)--了解deque

    队列-deque 有了上面一节的基础.当然你须要全然掌握上一节的全部方法,由于上一节的方法.在以下的教程中 会重复的用到. 假设你没有记住,请你返回上一节. http://blog.csdn.net/ ...

  10. SQL2012 尝试读取或写入受保护的内存。这通常指示其它内存已损坏

    今天打开SQL2012,突然就连接不了数据库.一開始还以为是某个server崩溃了.结果试了好几个.都还是如此,弹出提演示样例如以下: 尝试读取或写入受保护的内存.这通常仅仅是其它内存已损坏.(Sys ...