W3C DOM 事件模型(简述)
1、事件模型
因为事件捕获与冒泡模型都有其优点和解释,DOM标准支持捕获型与冒泡型,可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器,并且在处理函数内部,this关键字仍然指向被绑定的DOM元素,另外处理函数参数列表的第一个位置传递事件event对象。首先是捕获式传递事件,接着是冒泡式传递,所以,如果一个处理函数既注册了捕获型事件的监听,又注册冒泡型事件监听,那么在DOM事件模型中它就会被调用两次。
【 oschina】
2、事件传播
A)冒泡模式(Bubble)IE浏览器只支持这种形式的传播,即事件对象从事件触发的目标(target)开始,一直传播到侦听同样事件类型的target祖先结点为止。即作为全局变量的时间对象沿着”元素树“向上传播
B)捕捉模式(Capture)这种模式与冒泡模式正好相反,即事件对象是从目标的外层向目标传播的,即从树的根结点向叶子结点传播。
3、事件注册
根据 DOM 2 Events 中描述,节点使用 'addEventListener' 和 'removeEventListener' 方法绑定和解绑事件监听器。
if(add.addEventListener){add.addEventListener("click",showMsgB,false);remove.addEventListener("click",removeE,false);
}
IE下没有addEventListener,但是也有自己的attachEvent,即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数(事件类型)需要加”on”,而addEventListener不用,另外attachEvent因为不支持事件捕捉,所以也没有第三个参数。
if(add.attachEvent){add.attachEvent("onclick",showMsgA);remove.attachEvent("onclick",removeE);
}
在支持W3C DOM的浏览器中,传统的事件注册被看作是注册于冒泡阶段。element.onEvent =handler()
4、stopPropagation, preventDefault 和 return false 的区别
stopPropagation():因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation() 方法。
preventDefault() 阻止后面将要执行的浏览器默认动作。
return false 之后的所有触发事件和动作都不会被执行。
参考资料
DOM事件模型:http://wenku.baidu.com/view/feafe986b9d528ea81c779e3.html
SD9011: 事件模型在各浏览器中存在差异:http://w3help.org/zh-cn/causes/SD9011
W3C DOM及其事件模型之初见:http://blog.csdn.net/yczxwestwood/article/details/6412997
stopPropagation, preventDefault 和 return false 的区别:http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/
W3C DOM 事件模型(简述)相关推荐
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- 【JS】DOM事件模型
DOM事件模型主要包含4个方面的内容,分别是: 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下: 首先,什么是DOM?文档对象模型(DOM)是表示文档(比如HTML和XM ...
- DOM标准与IE的html事件模型区别
转载:http://www.cnblogs.com/ilexcai/archive/2011/09/05/2168094.html http://blog.csdn.net/ca3355/articl ...
- 深入理解DOM事件机制
前言 本文主要介绍: DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一.DOM事件级别 针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级 ...
- addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡
当一个HTML元素触发一个事件时,该事件会在元素结点与根结点之间的路径传播.传播按顺序分为三个阶段:捕获阶段.目标阶段.冒泡阶段,这个传播过程就是 DOM 事件流. 事件冒泡就是当一个HTML元素出发 ...
- 移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...
- 关于DOM事件的Bubbling和Capturing
关于DOM事件的Bubbling和Capturing 在浏览器解析事件的时候,有两种触发方式,一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获).由上图可以看出来,冒泡的方式效果 ...
- JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录 一.事件与事件流 二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式 三.事件对象 四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
- JavaScript 事件模型 事件处理机制
这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们 ...
最新文章
- Linux系统版 lscpu
- 微软提供支持Windows 10预览版和EdgeHTML 14的预配置虚拟主机
- java获取json中的某个值_接口测试之json中的key获取
- a股历史30年的大盘价_[最新]回顾A股历史上的大井喷行情
- JAndFix: 基于Java实现的Android实时热修复方案
- 7-25 雨刷程序功能扩展设计 (100 分)
- 通用的启动参数获取getopt
- Java中的内存泄露的几种可能
- linux防火墙配置说明,Linux防火墙配置命令参数说明
- idea中git回退远程仓库版本
- java-Aspose.Words的使用(根据模板自动生成Office文档)
- Detours信息泄漏漏洞
- Spring异步切面源码解析
- 【PC工具】windows免安装录屏绿色软件,无需注册无水印绿色录屏软件
- 基于OpenPose的人体姿态检测
- 2021年6月四六级成绩查询时间!
- 【数学建模】Python+Gurobi求解线性规划
- python调用rarfile进行解压rar压缩包时,报了如下错误
- 焊接机器人编程c语言,机器人现场编程与调试(cnc上下料,弧焊,喷涂,点焊等),就是这么全!...
- Android蓝牙通信