事件注册封装------彭记（012）
事件注册封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.big{
width: 400px;
height: 400px;
border: 1px solid #ccc;
background-color: skyblue;
}
.small{
width: 200px;
height: 200px;
border: 1px solid red;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="big" class="big">rrttyy</div>
<p id="pp">asddfasdf基本原则</p>
<script>
/*没有兼容性
* 1.onclick(function(){})
*
* IE 9 及以上
* 2.addEventListener(type,function(),true/false)
*
*IE 6 ~10
* attachEvent("on"+type,function(){})*/
var div = document.getElementById("big");
var p = document.getElementById("pp");
var registerType = getRegister();
registerType(div,"click",function(e){
console.log(e);
console.log(this.innerHTML);
console.log('click');
});
registerType(p,"mouseover",function(e){
console.log(e);
console.log(this.innerHTML);
console.log('mouseover');
});
/*获取当前浏览器的绑定方式*/
function getRegister(){
console.log('看看有没有反复调用?');
/*意味着我需要通过addEventListener的方式绑定事件*/
/*handler:事件处理函数*/
if(document.addEventListener){
return function (dom,type,handler){
dom.addEventListener(type,handler);
}
}else if(document.attachEvent){
return function (dom,type,handler){
/*IE低版本中 IE7及以下：
* 1.并不会将事件源参数返回到事件处理函数中
* 2.事件处理函数中的this是当前的window对象*/
//dom.attachEvent("on"+type,handler);
dom.attachEvent("on"+type,function(){
handler.call(dom,window.event);
});
}
}else{
return function (dom,type,handler){
dom["on"+type] = handler;
}
}
}
</script>
</body>
</html>
