怎么解决事件绑定的兼容性问题

最新推荐文章于 2021-09-23 15:45:39 发布

超级小码丽

最新推荐文章于 2021-09-23 15:45:39 发布

阅读量1.9k

点赞数

分类专栏： javaScript 文章标签：事件绑定兼容性 JavaScript

本文链接：https://blog.csdn.net/baozhuona/article/details/53359433

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: skyblue;
margin:200px;
text-align: center;
line-height: 100px;
}
</style>
<script>
window.onload = function () {
var div = document.getElementsByTagName("div")[0];
// 需求：为div盒子绑定点击事件

// 方案1.ele.onclick方法
// 缺陷：只能为ele元素绑定一个click事件，如果绑定多个，后面的会覆盖前面的。

// div.onclick = function (e) {
// alert('Boom!惊喜1');
// }
// div.οnclick=function (e) {
// alert('捏哈哈！惊喜2');
// }

// 方案2.ele.addEventListener()方法
// 优点：为同一元素、绑定多个同一类型的事件，不会产生覆盖
// 缺陷：存在浏览器兼容性问题（IE7-不支持）

// if (window.addEventListener) {
// div.addEventListener('click',function (e) {
// alert('我是用addEventListener绑定的事件1');
// });
// div.addEventListener('click',function (e) {
// alert('我是用addEventListener绑定的事件2');
// });
// }

// 方案3.浏览器兼容性写法
// 优点：兼容各个版本浏览器
// 缺点：复用性差


// 想要绑定的事件
function handler(argument) {
alert('suprise~');
}

// if(window.addEventListener){
// div.addEventListener('click',handler);
// }else if (window.attachEvent) {
// div.attachEvent('onclick',handler);
// }else{
// div.onclick = handler;
// }

// 方案4.复用性写法
// 优点:通用于不同元素绑定不同类型事件
// 缺点：每次绑定事件，都需要进行一次浏览器类型判断，性能较差
// function registeEvent(ele,type,handler) {
// if(window.addEventListener){
// ele.addEventListener(type,handler);
// }else if (window.attachEvent) {
// ele.attachEvent('on'+type,handler);
// }else{
// ele['on'+type] = handler;
// }
// }
// registeEvent(div,'click',handler);

// 方案5.闭包式写法（函数内部返回函数）
// 优点：不用每次都进行浏览器类型判断
// 缺点：绑定的事件的this指向不同，e的获取方式不统一

function handler1(e) {
alert('恭喜你获得加班机会10次');
console.log(this);
//用addEventListener和[on+事件]方法绑定的handler1,this指向触发事件的ele元素，并且事件被触发时，系统会自动向函数传入包含事件信息的e对象。
//而用attachEvent方法绑定的handler1,this指向window对象，并且事件被触发时，系统不会自动向函数传入包含事件信息的e对象，用window.event获取。
var e = e || window.event;
console.log(e);
}
function createEventRegister() {
if (window.addEventListener) {
return function (ele,type,handler) {
ele.addEventListener(type,handler);
}
}else if (window.attachEvent) {
return function (ele,type,handler) {
ele.attachEvent('on'+type,handler);
}
}else{
return function (ele,type,handler) {
ele['on'+type] = handler;
}
}
}
var register = createEventRegister();
register(div,'click',handler);
register(div,'click',handler1);

// 方案6.终极写法（使用了函数原型的方法：
// 函数名.apply(this指向的对象，传入函数的参数)）
// 优点：完美
// 缺点：没有缺点
//
function handler2(e) {
alert('恭喜你喜当爹');
console.log(this);
console.log(e);
}
function createEventRegister() {
if (window.addEventListener) {
return function (ele,type,handler) {
ele.addEventListener(type,handler);
}
}else if (window.attachEvent) {
return function (ele,type,handler) {
ele.attachEvent('on'+type,function() {
handler.apply(ele,window.event);
// 函数名.apply(this指向的对象，函数实参)
});
}
}else{
return function (ele,type,handler) {
ele['on'+type] = handler;
}
}
}
var register = createEventRegister();
register(div,'click',handler2);

}

</script>
</head>
<body>
<div>我是礼品盒<br>点我有惊喜</div>
</body>
</html>