首页 > 代码库 > IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别
IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别
一:在布局中直接添加事件处理
<div id="div1" onclick="fOne();"></div>
<script>
var oDiv1 = document.getElementById("div1");
function fOne(){
alert(this===window);//true
}
</script>
弹出true,是因为在布局中调用的时候省略了window,全面的应该是window.One();
二:所有浏览器都支持DOM0级事件处理程序,且使用该方式时,事件处理程序是在元素的作用域中运行,因此程序中的this都是指向元素。
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
alert(this===oDiv1);//true
}
移出事件处理:
oDiv1.onclick = null;
目前为止,我还是非常喜欢DOM0级事件处理程序的,没有浏览器兼容性问题;
三:DOM2级事件处理程序(事件监听机制)可以给同一个元素依次添加多个事件处理;
以下是事件监听机制在使用时的注意事项:
IE9(含)以上,firefox,chrome,safari使用以下方法:
var oDiv1 = document.getElementById("div1");
function fOne(){
alert(this===oDiv1);//true
}
oDiv1.addEventListener("click",fOne,false);
其中各个参数的意思,自己去查w3c,http://www.w3school.com.cn/,自己动手,丰衣足食。
移出事件处理:
oDiv1.removeEventListener("click",fOne,false);
只能使用这一种。
IE8(含)以下的IE浏览器使用以下方法:
oDiv1.attachEvent("onclick",fOne);
移出事件处理:
oDiv1.detachEvent("onclick",fOne);
也是只能使用这一种。
注意以上蓝色地方的不同;
PS:IE9,IE10以上两种方式都支持。IE11支持的是第一种,其实,现在的IE11还是紧跟规范的,值得嘉奖……同时,也看到了未来前端开发的美好日子……
下边还有最坑妹的地方,在IE所特有的DOM2级事件处理程序是在全局作用域中执行的,也就是说,此时的this指向的是window
在IE8和以下的IE浏览器中测试:
function fOne(){
alert(this===window);//true
}
oDiv1.attachEvent("onclick",fOne);
如果你觉得这里没有必要写===,那么,O(∩_∩)O哈哈~,诡异的事情来喽~~~~
function fOne(){
alert(this==oDiv1);//true
}
oDiv1.attachEvent("onclick",fOne);
刚开始,我也很奇怪,但是,我们单独将this弹出一下看看:
IE8弹出的是: IE7(含)以下弹出的是:
IE8(含)以上的浏览器和别的浏览器除了说明this是一个对象以外,还会说明是什么类型,但是IE7(含)以下就表现的比较含蓄了……(总算IE知错能改……)
然后,我们再弹出oDiv看看:
IE8弹出的是: IE7(含)以下弹出的是:
接下来,再弹出window看看:
IE8弹出的是: IE7(含)以下弹出的是:
从IE8的弹出框中的值我们可以看到,oDiv1跟window两个实际上值是相等的都是object,但是类型不同,这样也就解决了,为什么上面==是true,而===是false了,但是,请恕小女子才疏学浅,HTMLDivElement这个类的定义属于什么范畴的知识???请过路大神赐教……
IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别