javascript---事件绑定机制

Posted 2020-07-01

事件绑定分两种:

  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             }