JS事件流与DOM事件处理程序

在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事件处理程序相关推荐

JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件示例: <body> <div> <butt ...
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
彻底搞懂原生事件流和 React 事件流
事件系统,业务开发中只要需要与用户进行交互,那么事件是必不可少的,dom 中存在很多事件,比如 click,scroll,focus 等等.我们将深入事件系统中,以及事件中常用的一些操作比如 prev ...
移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...
js干货-Bom，Dom事件及各种案例
BOM : 浏览器的一窗口 window 对象不同的窗口不共享 window 实际上全局变量的和全局函数都属于window对象的自定义属性和方法 window 对象的属性 navigator 浏览器 ...
带你理解DOM事件流
在做前端开发的时候,我们经常需要做一些各式各样的交互,如鼠标单击/双击/滑动事件.键盘事件等等等等,这些都是DOM事件.首先我们先看一个概念,叫DOM事件流. DOM事件流事件流:事件在目标元素和祖 ...
JavaScript（六）—— DOM 事件高级
本篇为 JavaScript 系列笔记第六篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
DOM - DOM事件高级
1. 注册事件(绑定事件) 给元素添加事件,称为注册事件或绑定事件. 有两种方式:传统方式和方法监听注册方式 1.1 传统方式注册利用on开头的事件 onlick <button onclic ...
JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录一.事件与事件流二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式三.事件对象四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...

JS事件流与DOM事件处理程序

JS事件流与DOM事件处理程序相关推荐

最新文章

热门文章