javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用:
<input type="button" onclick="alert('Button Click')" />
当上面的button被点击后,会弹出一个框显示“Button Click”.
在javascript中添加事件监听函数有多种方法,比如:
在html元素上
- <input type="button" id="myButton" onclick="alert('Button Click')" />
用上述元素对应的js属性
- document.getElementById("myButton").onclick = function () {
- alert("Button Click");
- }
用统一的添加函数
- document.getElementById("myButton").addEventListener("click",
- function() {
- alert("Button Click");
- },
- true)
这几种方法在作用域,事件传播等方面都有区别,这就是所谓的0级DOM,2级DOM事件模型的区别。让我们来看下何谓0级DOM,2级DOM。
0级DOM:
一开始浏览器处理事件的时候只有原始事件模型,事件处理程序被设置为js代码串作为html的性质值,例如:
- <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >
在js中html元素都有一个对应的对象,这个对象的属性对应那个html元素的性质,所以可以用js代码添加事件监听函数
- document.getElementById("myButton").onclick = function () {
- alert('thanks');
- }
通常情况下事件监听函数如果返回一个值并且是false,则会阻止浏览器执行默认的动作。无论用html还是js,都是把一个函数赋值给文档元素,在事件监听函数被调用时候它是作为产生事件的元素的放法调用的,所以this引用的是那个目标元素(例子中的Input对象)。
从技术上来说,W3C的DOM标准并不支持上述最原始的添加事件监听函数的方式,这些都是在DOM标准形成前的事件模型。尽管没有正式的W3C标准,但这种事件模型仍然得到广泛应用,这就是我们通常所说的0级DOM。
2级DOM:
DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ,这个标准下的事件模型就是我们所说的2级DOM事件模型
2级DOM的事件传播
在2级DOM中,当事件发生在节点时,目标元素的事件处理函数就被触发,而且目标的每个祖先节点也有机会处理那个事件。因为2级DOM的事件传播分三个阶段进行。第一,在capturing阶段,事件从Document对象沿着文档树向下传播给节点。如果目标的任何一个祖先专门注册了事件监听函数,那么在事件传播的过程中就会运行这些函数。下一个阶段发生在目标节点自身,直接注册在目标上的适合的事件监听函数将运行。第三阶段是bubbling阶段,这个阶段事件将从目标元素向上传播回Document对象(与capturing相反的阶段)。虽然所有事件都受capturing阶段的支配,但并不是所有类型的事件都bubbling。(0级DOM事件模型处理没有capturing阶段)
如:
- <span>
- <a></a>
- </span>
点击a后capturing阶段事件传播会从document-> span->a,然后发生在a,最后bubbling阶段事件传播会从a->span->document 。
2级DOM的事件监听函数注册
2级事件模型中,可以调用对象的addEventListener()方法为元素设置事件监听函数,也就是说通过2级DOM的这个API注册的函数才有可能在上述事件传播三个阶段中任意一个阶段捕捉到事件的发生(如果用0级DOM的2个方法赋值的事件监听函数不能在capturing阶段捕捉到事件)。
1 .addEventListener第一个参数是String,事件类型名,没有前缀on,比如要注册click事件就传入“click”
,不是“onclick”
2 .第二个参数是监听函数,在调用的时候js会传给他一个Event对象,这个对象放了有关事件的细节,如果调用的这个对象的stopPropagation()方法,则会阻止事件传播进一步传播(比如在第一个阶段捕捉到事件并运行事件监听函数,其中调用了event。stopPropagation则事件就不会再被传播经历第二第三阶段了)
3 .第三个参数是boolean,true表示事件监听函数能够在三个阶段中的任意一个阶段捕捉到事件(符合2级DOM标准),如果是false就表示事件监听函数不能在capturing阶段捕捉到事件(表现同0级DOM)。
2级DOM中监听函数中的this
通过addEventListener添加的函数中的this,标准中并没有规定this必须指向目标元素, 尽管大多数浏览器都是这么实现的,但最终还是取决于浏览器的实现,我们需要用到目标元素的时候请调用event.currentTarget.
2级DOM的Event对象
用addEventListener添加的事件监听函数,在被调用的时候js会传给他一个Event对象,下面就是这个Event对象的常用属性
type:
发生的事件的类型,例如"click", "mouseover"
target:
发生事件的节点,可能与currentTarget不同
currentTarget:
正在处理事件的节点,如果在capturing阶段和冒泡阶段处理事件,这个属性就与target属性不同。在事件监听函数中应该用这个属性而不是this
stopPropagation():
可以阻止事件从当前正在处理他的节点传播
preventDefault():
阻止浏览器执行与事件相关的默认动作,与0级DOM中返回false一样
clientX, clientY:
鼠标相对于浏览器的x坐标y坐标
screenX, screenY:
鼠标相对于显示器左上角的x坐标y坐标
IE事件模型
1.Event对象不是传递给事件监听函数,而是通过Window对象的event属性访问Event对象.
2.IE Event对象常用属性
type:
兼容DOM的type属性
srcElement:
兼容DOM的target属性
clientX, clientY:
兼容DOM的clientX, clientY属性
cancelBubble:
布尔值,设为true同调用stopPropagation()
returnValue:
布尔值,设为false同调用preventDefault()
3.事件监听函数注册
没有addEventListener,只有attachEvent。2个参数,同addEventListener前两个,只是事件名带前缀on。 IE事件模型没有capturing阶段所以调用attachEvent相当于调用addEvetnListener且第三个参数为false:
- document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
相当于
- document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);
4.用attachEvent注册的函数将被作为全局函数调用,而不是作为发生事件的文档元素的方法,也就是说this引用的是Window对象,而不是事件的目标元素。
javascript中0级DOM和2级DOM事件模型浅析的更多相关文章
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- 如何解决JavaScript中0.1+0.2不等于0.3
console.log(0.1+0.2===0.3)// true or false?? 在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!= ...
- JavaScript中0和""的比较问题
今天在公司的时候发现了一个很奇怪的Js的问题,以前也没有注意到,我从数据库中取出某一个字段的值,而这个字段值刚好是0,然后我在判断这个值是不是等于""时,就出现了如下的问题: 就是 ...
- 为什么 JavaScript 中 0.1+0.2 不等于 0.3 ?
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/2kea7-jACCJmSYBQAwXyIg作者:刘洋 在 js 中进行数学的运算时,会出现0. ...
- DOM事件模型浅析
1.何为DOM DOM是"Document Object Model"的缩写,中文译为"文档对象模型".它是一种跨平台.跨语言的编程接口,将HTML,XHTML ...
- javascript中0.01*2324=23.240000000000002 ?
js中的乘法运算的小问题 0.01*2324=23.240000000000002 ? , 结果为什么出现这么多小数位呢?
- 为什么在JavaScript中0.1+0.2不等于0.3?
0.1+0.2不等于0.3?是不是有点颠覆你的认知,但是,在js中,是真实存在的! console.log(0.1+0.2); // 0.30000000000000004 其实这都是因为浮点数运算的 ...
- 关于JavaScript中0、空字符串、'0'是true还是false的总结
最近被问到关于js中空字符串是true还是false得问题,一时间没想起来,现在在chrome的console面板上输出代码测试一下. "" == false 结果是true ...
- 在 Javascript 中,为什么给 form 添加了 onsubmit 事件,为什么 IE7/8 还是会提交表单?
参考地址:http://stackoverflow.com/questions/4078245/onsubmit-return-false-has-no-effect-on-internet-expl ...
随机推荐
- (我国的省—市—区)三级联动数据库.sql
# MySQL-Front 5.1 (Build 2.7) /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */; /*!40101 SET SQL_MODE='' */ ...
- Visual Studio的广告剧
一个热衷于code的developer,一个热衷于developer的girl,他们将发生怎样的故事? 第一集:<想做你的Code> 第二集:<让爱延长> 第三集:<幸福 ...
- jquery正则表达式显示文本框输入范围 只能输入数字、小数、汉字、英文字母的方法
正则表达式限制文本框只能输入数字 许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等各类代码.1.文本框只能输入数字代码(小数点 ...
- xml文件操作
public static XmlDocument getDoc(String path)//加载xml文档 { XmlDocument doc = new XmlDocument(); doc.Lo ...
- “express不是内部或外部命令”解决办法
由于安装的Express是最新版本4.13.1,4.x版本就需要安装express-generator.命令如下:npm install -g express-generator ps: 1.卸载: ...
- 基于toyix的进程和轻权进程的学习
我们在平时的计算机课上学习过进程,知道程序的执行的背后其实就是进程在进行一些操作.大家都知道打开windows的任务管理器可以看到正在运行的进程,当程序卡死时,可以在任务管理器里强制关闭相关程序的进程 ...
- VS环境下的makefile编译
直接找这个了,原来VS也可以makefile,在windows上解析makefile的软件叫NMAKE.exe 打算用命令Cmake -G“NMake Makefiles” 生成VS环境下Nmake的 ...
- hdu5017:补题系列之西安网络赛1011
补题系列之西安网络赛1011 题目大意:给定一个椭球: 求它到原点的最短距离. 思路: 对于一个椭球的标准方程 x^2/a^2 + y^2/b^2 +z^2/c^2=1 来说,它到原点的最短距离即为m ...
- 【译】Javascript中的数据类型
这篇文章通过四种方式获取Javascript中的数据类型:通过隐藏的内置[[Class]]属性:通过typeof运算符:通过instanceof运算符:通过函数Array.isArray().我们也会 ...
- Visual Studio 2012 编译C++显示cl命令
为了用newlisp来实现VC编译,以便用我的Emacs开发VC程序,而不需要再打开VS 2012, 需要自己实现命令行的编译.我不需要nmake,因为我想直接了解VC编译器,以便今后更好的驾驭它. ...