前端菜鸟学习之DOM事件处理

一、事件处理程序

　　1.DOM0级事件处理程序：就是将一个函数赋值给一个事件处理程序属性，至今仍为现代所有浏览器所支持，主要得益于其跨浏览器的优势，要使用DOM0级事件，首先要得到操作对象的引用，具体实例如下图所示。　　　　

    var oBtn = document.querySelector('.btn');
        oBtn.onclick = function(){
            alert(‘click’);
        }

　　这样就为oBtn元素指定了一个onclick的事件处理程序，当然也可以删除给该元素添加的事件处理程序，其方法如下：

　　oBtn.onclick = null;

　　再次单击按钮不会有任何动作发生。

　　2.DOM2级事件处理程序：'DOM2级事件'定义了两个方法：addEventListener()(用于添加和指定事件处理程序)和removeEventListener()(用于删除事件处理程序)，这两个函数接收三个参数：1.要处理的事件类型，2.事件处理程序函数fn，3.布尔值，如果这个布尔值是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。具体实例如下图所示：

     var oBtn = document.querySelector('.btn');
            oBtn.addEventListener('click',function(){
                alert('click');
            },false);

　　与DOM0级事件相比,DOM2级事件的好处是可以给同一个元素添加多个事件处理程序而不被覆盖，看下面例子：

    var oBtn = document.querySelector('.btn');
            oBtn.addEventListener('click',function(){
                alert('click1');
            },false);
            oBtn.addEventListener('click',function(){
                alert('click2');
            },false);

　　其结果会依次弹出click1，click2。但是如果采用DOM0级事件处理，则会产生覆盖。

   var oBtn = document.querySelector('.btn');
            oBtn.onclick = function () {
                alert(66);
            }
            oBtn.onclick = function () {
                alert(99);
            }

　　其结果只会弹出99。但是采用DOM2级事件在ie中会有兼容问题（ie8以及更早的版本不支持），下面会马上说ie的事件处理程序。

　　3.ie的事件处理程序:实现了与DOM中类似的两个方法：attachEvent()(添加指定的事件处理程序) 和detachEvent(删除指定的事件处理程序)，这两个方法有两个参数：事件类型，事件处理函数。请看下面的例子。

 var oBtn = document.querySelector('.test');
            oBtn.attachEvent('onclick',function(){
                alert('click');
            });

　　注意这里函数的事件类型要写成onclick形式，在DOM2级事件里须写成click形式。还有个需要注意的问题就是IE事件处理程序函数中this的指向，DOM事件处理程序函数里面的this指的是绑定事件的元素本身，而在使用attachEvent()方法时,事件处理程序会在全局作用域中运行，因此这里的this指向的是window对象。

    var oBtn = document.querySelector('.test');
            oBtn.attachEvent('onclick',function(){
                alert(window === this);//true
            });

  var oBtn = document.querySelector('.test');
            oBtn.addEventListener('click',function(){
                alert(this === oBtn); //true
            },false);

  var oBtn = document.querySelector('.test');
            oBtn.onclick = function () {
                alert(this === oBtn);//true
            }

　支持ie事件处理程序的浏览器有ie和opera；

　4.跨浏览器的事件处理程序:能够实现视情况分别使用DOM0级事件、DOM2级事件或IE方法来添加事件的功能，将实现过程封装在一个名叫EventUtil的对象中。

 var EventUtil = {
                addHandler:function(element,type,handler){//添加事件处理程序
                    if(element.addEventListener){
                        element.addEventListener(type,handler,false); //DOM2级
                    }else if(element.attachEvent){
                        element.attachEvent('on'+type,handler);//IE方法
                    }else{
                        element['on' + type] = handler; //DOM0级
                    }
                },
                removeHandler:function(){  //删除事件处理程序
                    if(element.removeEventListener){
                        element.removeEventListener(type,handler);
                    }else if(element.detachEvent){
                        element.detachEvent('on'+type,handler);
                    }else{
                        element['on' + type] = null;
                    }
                }
            }

　　调用EventUtil 中的addHandler方法，首先会检测传入的元素中是否存在DOM2级方法，如果存在，则使用该方法，如果存在的是IE的方法，则使用第二种方案，如果前面两种方案都无效，则默认采用DOM0级事件。下面来看个使用的例子：

  var oBtn = document.querySelector('.btn');
            var handler = function () {
                alert(66);
            }
            EventUtil.addHandler(oBtn, 'click', handler);