在上一篇文章中提到了关于传统的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>