javascript---事件绑定机制

事件绑定分两种:

  1.传统事件绑定（内联模型，脚本模型）
  2.现代事件绑定（DOM2级模型）    //更强大更方便

 

　由于传统事件绑定window.onload有覆盖问题，即只能注册一次事件，所以下面只讲现代事件绑定。

---

 

1.W3C事件处理函数

  addEventListener()   //添加事件

  removeEventListener()  //删除事件

  参数：对象.addEventListener(事件名，函数，冒泡(false)或捕获(true)的布尔值)

 

解决了几个问题：

//1.覆盖问题解决，会执行三段。

    window.addEventListener('load',function(){
            alert('lee');
        },false);
        window.addEventListener('load',function(){
            alert('Mr.lee');
        },false);
        window.addEventListener('load',function(){
            alert('Mr..lee');
        },false);

 

//2.相同函数屏蔽多次注册的问题，只执行一次。

    window.addEventListener('load',init,false);
        window.addEventListener('load',init,false);
        window.addEventListener('load',init,false);
        function init(){
            alert('Lee');
        }

 

//3.解决this的传递错误

        window.addEventListener('load',function(){
            var box=document.getElementById('box');
            box.addEventListener('click',toBlue,false);
        },false);
        function toRed(){
            this.className='red';
            this.removeEventListener('click',toRed,false);
            this.addEventListener('click',toBlue,false);
        }
        function toBlue(){
            this.className='blue';
            this.removeEventListener('click',toBlue,false);
            this.addEventListener('click',toRed,false);
        }

 

//综上所述：W3c完美解决问题,IE9+也支持,IE8-不支持

 

---

 

2.IE事件处理函数

attachEvent()  //添加

detachEvent()  //删除

　//注意：IE存在的缺陷
   //1.IE只支持冒泡
   //2.IE添加事件解决匿名函数覆盖问题但是不同，执行顺序倒过来
   //3.IE中的this指向是window而不是DOM对象，通常用对象冒充方法解决
   //4.内存泄漏

 

---

 

3.兼容性写法

//添加事件

    function addEvent(obj,type,fn){
                if(obj.addEventListener){
                    obj.addEventListener(type,fn,false);
                }else if(obj.attachEvent){
                    obj.attachEvent('on'+type,fn);                    //依然不能解决this传参问题,使用对象冒充方法call或apply
                }
            }

 

//移除事件

    function removeEvent(obj,type,fn){
                if(obj.removeEventListener){
                    obj.removeEventListener(type,fn,false);
                }else if(obj.detachEvent){
                    obj.detachEvent('on'+type,fn);
                }
            }

//获取目标对象

    function getTarget(evt){    
                if(evt.target){                    //w3c
                    return evt.target;        
                }else if(window.event.srcElement){
                    return window.event.srcElement;
                }
            }