addEventListener和attachEvent绑定事件的兼容
//绑定事件的兼容
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
} else if(element.attachEvent){
element.attachEvent("on"+type,fn);
} else {
element["on"+type]=fn;
}
}
其中addEventListener和attachEvent方法当中的this指向不同，addEventListener的this指向是调用对象的本身，而attachEvent则是window
在这里引入两个属性“e.target和e.srcElement”
target定义：
target 属性规定哪个 DOM 元素触发了该事件。
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
event.srcElement 在ie 下从字面上可以看出来有以下关键字：事件.源（它的意思就是：当前事件的源），可以捕获当前事件作用的对象，这两个属性的作用是一样的，类似于this，只不过ie下支持e.srcElement，而谷歌支持e.target
下面是e.target和e.srcElement的兼容调式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮" onclick="test(event)">
<script>
function test(e){
var target = e.srcElement ? e.srcElement : e.target;
console.log(target);
}
</script>
</body>
</html>
所以要改变addEventListener和attachEvent方法中的this的指向的话，则要通过这两个属性去改变！
image.png
btn.addEventListener("click",function (e) {
console.log(this);//指向btn`
console.log(e.target);//btn
},false);
btn.attachEvent('onclick',function(e){
console.log(this);//指向window
console.log(e.srcElement);//btn
});
这样就可以解决attachEvent方法中this的指向问题
网友评论