您的位置：首页 > Web前端 > JavaScript
javascript中事件绑定的兼容性写法

2018-07-04 10:30 281 查看
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
border:10px dashed lightgreen;
}
</style>
<script>
//注册事件的方式
//1.  ele.on事件类型 = function(){}
//2.  addEventListener(事件类型,事件处理函数,useCapture)  第三个参数默认是false，冒泡阶段执行
//3.  attachEvent(事件类型，事件处理函数)

//1.在注册事件的时候，判断浏览器的注册事件的方式，然后直接使用该方式进行注册事件
//复用性太差
//2.将注册事件的代码封装到一个函数中
//每次调用该函数，都会进行浏览器能力检测
//3.在函数中返回函数，让外部函数只执行一次，判断也就只会执行一次
//使用函数内创建的函数返回给外界，就可以重复使用该函数，进行事件的注册

//封装成函数，问题是每次都会判断
function registeEvent(target, type, handler){
if(target.addEventListener){
target.addEventListener(type,handler)
}else if(target.attachEvent){
target.attachEvent("on"+type,handler)
}else{
target["on"+type] = handler;
}
}

//使用更好的方式，避免了多次的判断
//这里存在问题就是

//我们使用统一的方式，进行事件注册

//1、注册的事件的处理函数中的，this指向不一致
//使用addEventListener的方式注册的点击事件的回调函数中的this 指向target
//但是使用attachEvent的方式注册点击事件的回调函数中的this 指向window

//2、3种注册事件的方式中，回调函数内获取事件对象的方式也是不一致的
//要让他们统一，
//在第二种的事件注册方式（attachEvent）中，手动给handler传递window.event

function createEventRegister(){
if(window.addEventListener){
return function(target, type, handler){
//                    this ---> window
target.addEventListener(type,handler)
}
}else if(window.attachEvent){
return function(target, type, handler) {
target.attachEvent("on" + type, function(){
handler.call(target, window.event);
})
}
}else{
return function(target, type, handler) {
target["on" + type] = handler;
}
}
}

var registeEvent = createEventRegister();

window.onload =function () {
var div = document.getElementById("div1");
registeEvent(div,"click",function(e){
console.log(e);
console.log(this);
//this---->该事件的触发对象
alert("太阳天空照，花儿对我笑，小鸟说：完了")
})
}

//        div.addEventListener("click",function(e){
//            this
//            e.screenX;
//        })
//
//        div.attachEvent("onclick".function(){
////            this--->window
//            window.event.screenX
//        })

</script>
</head>
<body>
<div id="div1">我是一个div，哈哈哈哈<br>
点我有惊喜哦~~~
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航