1.传统事件绑定（内联模型，脚本模型） 2.现代事件绑定（DOM2级模型） //更强大更方便
由于传统事件绑定window.onload有覆盖问题，即只能注册一次事件，所以下面只讲现代事件绑定。
1.W3C事件处理函数
addEventListener() //添加事件
removeEventListener() //删除事件
参数：对象.addEventListener(事件名，函数，冒泡(false)或捕获(true)的布尔值)
解决了几个问题：
//1.覆盖问题解决，会执行三段。
1 window.addEventListener('load',function(){ 2 alert('lee'); 3 },false); 4 window.addEventListener('load',function(){ 5 alert('Mr.lee'); 6 },false); 7 window.addEventListener('load',function(){ 8 alert('Mr..lee'); 9 },false);
//2.相同函数屏蔽多次注册的问题，只执行一次。
1 window.addEventListener('load',init,false); 2 window.addEventListener('load',init,false); 3 window.addEventListener('load',init,false); 4 function init(){ 5 alert('Lee'); 6 }
//3.解决this的传递错误
1 window.addEventListener('load',function(){ 2 var box=document.getElementById('box'); 3 box.addEventListener('click',toBlue,false); 4 },false); 5 function toRed(){ 6 this.className='red'; 7 this.removeEventListener('click',toRed,false); 8 this.addEventListener('click',toBlue,false); 9 } 10 function toBlue(){ 11 this.className='blue'; 12 this.removeEventListener('click',toBlue,false); 13 this.addEventListener('click',toRed,false); 14 }
//综上所述：W3c完美解决问题,IE9+也支持,IE8-不支持
2.IE事件处理函数
attachEvent() //添加
detachEvent() //删除
//注意：IE存在的缺陷 //1.IE只支持冒泡 //2.IE添加事件解决匿名函数覆盖问题但是不同，执行顺序倒过来 //3.IE中的this指向是window而不是DOM对象，通常用对象冒充方法解决 //4.内存泄漏
3.兼容性写法
//添加事件
1 function addEvent(obj,type,fn){ 2 if(obj.addEventListener){ 3 obj.addEventListener(type,fn,false); 4 }else if(obj.attachEvent){ 5 obj.attachEvent('on'+type,fn); //依然不能解决this传参问题,使用对象冒充方法call或apply 6 } 7 }
//移除事件
1 function removeEvent(obj,type,fn){ 2 if(obj.removeEventListener){ 3 obj.removeEventListener(type,fn,false); 4 }else if(obj.detachEvent){ 5 obj.detachEvent('on'+type,fn); 6 } 7 }//获取目标对象
1 function getTarget(evt){ 2 if(evt.target){ //w3c 3 return evt.target; 4 }else if(window.event.srcElement){ 5 return window.event.srcElement; 6 } 7 }
转载于:https://www.cnblogs.com/GacentJohn/p/5339522.html
