在上一篇文章中提到了关于传统的JS中注册事件对象的一些缺点和问题,下面是关于DOM2级的现代事件绑定。本文中设计到的HTML文件在文章最后

一、W3C事件处理函数

“DOM2 级事件”定义了两个方法,用于添加事件和删除事件处理程序的操作:addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数;事件名、函数、冒泡或捕获的布尔值(true 表示捕获,false 表示冒泡)。看看这两个方法在上一篇文章中的几个问题是否解决

问题一:事件覆盖问题----已经解决,下面两个事件注册函数都有值输出

<span style="font-size:18px;">        window.addEventListener("load",function(){
alert("abc");
},false); window.addEventListener("load",function(){
alert("cde");
},false);</span>

问题二:重复注册的问题----已解决。下面连续注册三次,但只是输出一个值

<span style="font-size:18px;"><span style="white-space:pre">	</span>function init(){
alert("重复注册");
} window.addEventListener("load",init,false);
window.addEventListener("load",init,false);
window.addEventListener("load",init,false);</span>

问题三:this自动传值的问题----已解决,下面的事件切换器中通过this能够代表box对象

<span style="font-size:18px;">	window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click",toBlue,false);
} function toBlue(){
this.className = "blue";
this.removeEventListener("click",toBlue,false); //必须要进行移除,否则只是能够切换一次
this.addEventListener("click",toRed,false);
} function toRed(){
this.className = "red";
this.removeEventListener("click",toRed,false);
this.addEventListener("click",toBlue,false);
}</span>

问题四:添加新的函数被覆盖或者只是执行一次----已经解决

<span style="font-size:18px;">	window.addEventListener("load",function(){
var box = document.getElementById("box");
box.addEventListener("click",function(){
alert("xin di han shu");
},false);
box.addEventListener("click",toBlue,false); },false)</span>

新功能:W3C提供的这两个DOM2级事件绑定方法中,第三个参数代表的是是否可以进行捕获和冒泡操作,一般都为冒泡,下面两个输出都执行

<span style="font-size:18px;">	window.addEventListener("load",function(){
var box = document.getElementById("box");
box.addEventListener("click",function(){
alert("DIV");
},false);
document.addEventListener("click",function(){
alert("document");
},false); },false)</span>

二、IE事件处理函数----下面的两个方法在高版本的浏览器中(包括IE11)已经不支持,但是IE8/IE9还是支持,火狐和谷歌也不支持

IE 实现了与 DOM 中类似的两个方法:attachEvent()和 detachEvent()。这两个方法接受相同的参数:事件名称和函数。
在使用这两组函数的时候,区别:1.IE 不支持捕获,只支持冒泡;2.IE 添加事件不能屏蔽重复的函数;3.IE 中的 this 指向的是 window 而不是 DOM 对象。4.在传统事件上,IE 是无法接受到 event 对象的,但使用了 attchEvent()却可以,但有些区别。

问题一:覆盖问题----解决了,但是是倒叙输出,后注册的方法先执行

<span style="font-size:18px;">	window.attachEvent("onload",function(){
alert("第一次");
});
window.attachEvent("onload",function(){ alert("第二次");
});</span>

问题二:重复注册问题----没有解决,下面同样有三个值输出

<span style="font-size:18px;">	window.attachEvent("onload",init);
window.attachEvent("onload",init);
window.attachEvent("onload",init);
function init(){
alert("重复");
}
</span>

问题三:this自动传值问题----没有解决,这里面的this代表的是window对象

<span style="font-size:18px;">	window.onload = function(){
var box = document.getElementById("box");
box.attachEvent("onclick",function(){
//alert(this === "box");
alert(this === "window");
});
}</span>

问题四:添加额外的事件,只能够执行一次或者被覆盖----解决了

<span style="font-size:18px;">	window.onload = function(){
var box = document.getElementById("box");
box.attachEvent("onclick",function(){
alert("diyici");
});
box.attachEvent("onclick",function(){
alert("dierci");
});
}</span>

新的功能:能够通过传值的方法来获取event对象,这应该是一个比较好的方面

<span style="font-size:18px;">//传统方式不能够通过传值来获取event对象,但是通过attachEvent却可以
window.onload = function(){
var box = document.getElementById("box");
//box.onclick = function(evt){
// alert(evt); //传统方式中无法通过这种方法获得event对象
//} box.attachEvent("onclick",function(evt){ //IE的现代事件绑定机制是可以的
//alert(evt);
//alert(typeof evt);
//alert(evt.target.tagName);
alert(window.event.target.tagName);
});
}</span>

IE8下DOM2级的事件切换器

<span style="font-size:18px;">//IE事件切换器,通过event对象下的srcEvent属性来获取事件源this对象
window.onload = function(){
var box = document.getElementById("box");
box.attachEvent("onclick",toRed);
} function toRed(){
var that = window.event.srcElement; //不能够传递this,用这个来获取事件源
that.className = "red";
that.detachEvent("onclick",toRed);
that.attachEvent("onclick",toBlue);
} function toBlue(){
var that = window.event.srcElement;
that.className = "blue";
that.detachEvent("onclick",toBlue);
that.attachEvent("onclick",toRed);
}
</span>

IE 中的事件绑定函数 attachEvent()和 detachEvent()已经被高版本的浏览器给淘汰了,平时也几乎不用它, 有几个原因: 1.IE9 就将全面支持 W3C 中的事件绑定函数; 2.IE 的事件绑定函数无法传递 this; 3.IE的事件绑定函数不支持捕获; 4.同一个函数注册绑定后, 没有屏蔽掉; 5.有内存泄漏的问题

兼容下的事件切换器

由于在网上搜索了一下,IE8任然有很大的市场份额,故必须得做浏览器的兼容

<span style="font-size:18px;">//跨浏览器获取事件源
function getTag(evt){
if(evt.target){ //W3C
return evt.target;
}else if(window.event.srcElement){
return window.event.srcElement; //IE
}
} //跨浏览器添加事件
function addEvent(obj,type,fun){
if(obj.addEventListener){
obj.addEventListener(type,fun,false);
}else if(obj.attachEvent){
obj.attachEvent("on"+type,fun);
}
} //跨浏览器移除事件
function removeEvent(obj,type,fun){
if(obj.removeEventListener){
obj.removeEventListener(type,fun,false);
}else if(obj.detachEvent){
obj.detachEvent("on"+type,fun);
}
} //给对象添加事件
addEvent(window,"load",function(){
var box = document.getElementById("box");
addEvent(box,"click",toBlue);
}); function toRed(evt){
var that = getTag(evt);
that.className = "red";
removeEvent(that,"click",toRed);
addEvent(that,"click",toBlue);
} function toBlue(evt){
var that = getTag(evt);
that.className = "blue";
removeEvent(that,"click",toBlue);
addEvent(that,"click",toRed);
}</span>

涉及到关于HTML文件的东西:

<span style="font-size:18px;"> <head>
<title> W3C和IE 中提供的DOM2级事件绑定函数 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<style>
.red{
width:200px;
height:200px;
background-color:red;
}
.blue{
width:200px;
height:200px;
background-color:blue;
}
</style>
<script type="text/javascript" src="code2.js"></script>
</head> <body>
<div id="box">测试DIV</div>
</body></span>

W3C和IE中的事件处理函数的更多相关文章

  1. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

  2. js中绑定事件处理函数,使用event以及传递额外数据

    IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = fun ...

  3. [转]理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  4. 理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  5. 理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();

    原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...

  6. 详解JavaScript中的事件处理

    在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML元素之内来使用),今天的事件,它已是DOM的重要组成部分,遗憾的是,IE继续保留它最早在IE4.0中实现的事件模型,以后 ...

  7. c#教程之事件处理函数的参数

    事件处理函数一般有两个参数,第一个参数(object sender)为产生该事件的对象的属性Name的值,例如上例单击标题为红色的按钮,第一个参数sender的值为button1.如上例标题为红色的按 ...

  8. Python+Qt学习随笔:PyQt中常用的事件处理函数

    在PyQt图形界面中,我们经常要捕获特定事件如鼠标按键按下.鼠标按下等事件以执行特定操作,可以通过重写组件对象的相关事件处理函数来实现相关处理,具体特定事件常用的包括如下: keyPressEvent ...

  9. javascript学习笔记(四):事件处理函数和动态创建html标记。

    1 HTML的事件属性  全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发 ...

随机推荐

  1. php变量那些事:学习过程中遇到的关于php变量的有趣的问题(不断发现不断更新)

    不断发现……,不断更新……,不断寻找答案……例子的测试环境:php5.3,win7,64位Num1:<?$a=array(1,2,3,4,5,6); $b=$a;$m=memory_get_us ...

  2. 【转】CSS white-space 属性

    定义和用法 white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. 默认值 ...

  3. C-链表的一些基本操作【创建-删除-打印-插入】

    #include <stdio.h> #include <stdlib.h> #include <malloc.h> #define LEN sizeof(stru ...

  4. BAT命令介绍【转自Internet】

    一.简单批处理内部命令简介 1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法: echo [{on│off}] [message] ...

  5. python中的remove趣谈

    首先我们要知道remove做的操作是顺序遍历list表,找到第一个匹配的项时删掉该项,并不会再往下找,那我们看下面的代码 mylist = [1,2,3] for i in mylist: print ...

  6. webpack 学习笔记 02 快速入门

    webpack 的目标 将依赖项分块,按需加载. 减少web app的初始加载时间. 使每一个静态集合都能够作为组件使用. 有能力集成第三方库,作为组件使用. 高度可配置化. 适用于大型项目. INS ...

  7. 浅谈iOS网络编程之一入门

    计算机网络,基本上可以抽象是端的通信.实际在通讯中会用到不同的设备,不同的硬件中,为了能友好的传输信息,那么建立一套规范就十分必要了.先来了解一些基本概念 了解网络中传输的都是二进制数据流.  2.了 ...

  8. SQL基础学习篇--字符函数

    字符函数可与SELECT,UPDATE,DELETE RIGHT()----从右侧开始选择  SELECT RIGHT(列,字符数量) FROM 表 LEFT()----从左侧开始选择  SUBSTR ...

  9. OracleINSERT提示IGNORE_ROW_ON_DUPKEY_INDEX

    OracleINSERT提示IGNORE_ROW_ON_DUPKEY_INDEX insert提示IGNORE_ROW_ON_DUPKEY_INDEX 在 insert into table a() ...

  10. kettle插入/更新

    1.数据库环境 --------------------实时表 ),Info )); ,'张启山','长沙'); ,'尹新月','长沙'); ,'二月红','长沙'); --------------- ...