JS 事件与事件对象小结

JavaScript与HTML之间的交互是通过事件来实现的。IE9，chrome，Firefox，Opera，Safari均实现了DOM2级规范中定义的标准DOM事件，而IE8和IE8以下版本仍然保留专有的事件处理方式。

一些基本概念：

• 事件：是文档或浏览器窗口中发生的一些特定的交互瞬间。
• 事件流：描述的是页面中接受事件的顺序。事件捕获 -->  事件目标 -->  事件冒泡
• 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点(document).
• 事件捕获：事件开始时由不太具体的节点先接收事件，然后向下传播到最具体的节点。

而js中事件监听方法总共有三种，分别如下所示：

• element.addEventListener(type, listener[, useCapture]); // IE6~8不支持，支持事件冒泡和捕获
• element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持，只支持事件冒泡
• element[’on’ + type] = function(){} // 所有浏览器，只支持事件冒泡，不支持对同一个元素的同一个事件注册多个事件监听器

我们把事件绑定以及事件解绑封装成为一个函数，兼容浏览器，包括IE6及以上

// 事件绑定
function addEvent(element, eType, handle, bol) {
    if(element.addEventListener){           //如果支持addEventListener
        element.addEventListener(eType, handle, bol);
    }else if(element.attachEvent){          //如果支持attachEvent
        element.attachEvent("on"+eType, handle);
    }else{                                  //否则使用兼容的onclick绑定
        element["on"+eType] = handle;
    }
}

　　

function removeEvent(element, eType, handle, bol) {
    if(element.addEventListener){
        element.removeEventListener(eType, handle, bol);
    }else if(element.attachEvent){
        element.detachEvent("on"+eType, handle);
    }else{
        element["on"+eType] = null;
    }
}

不是所有的事件都能冒泡，例如：blur、focus、load、unload，

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

• 支持至少DOM2级的浏览器所有事件的事件对象，都会有的成员。

属性方法	类型	读写	说明
bubbles	Blooean	只读	表明事件是否冒泡
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法
cancelable	Blooean	只读	表明是否可以取消事件的默认行为
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable为true，则可以使用这个方法
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
target	Element	只读	事件的目标
detail	Integar	只读	与事件相关的细节信息
eventPhase	Integar	只读	调用事件处理程序的阶段：1表示捕获阶段2表示处于目标3表示冒泡阶段
trusted	Blooean	只读	为true表示事件是浏览器生成的，为false表示事件是由开发人员通过js创建的
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

注意：

currentTarget: this对象始终等于他的值，随着事件冒泡或者捕获，他得值等于捕获或冒泡到的上级元素的值。
target：只包含事件的实际目标。

• IE中的事件对象

在IE8及其以前版本的浏览器是不兼容DOM2级的，但是还是可以使用dom0级的方法添加事件处理程序。

属性方法	类型	读写	说明
cancelBubble	Blooean	读写	默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同
returnvalue	Blooean	读写	默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同
srcElement	Element	只读	事件的目标，与DOM中的target属性相同
type	String	只读	被触发的事件类型

• 跨浏览器的事件对象

       这是一个通用的事件侦听函数，看代码就会懂很多问题！

var EventUtil={
    getEvent:function(event){
        return event||window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    preventDefault:function(){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    stopPropagation:function(){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    },
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
             element["e"+type]=function(){
              handler.call(element)
          }
            element.attachEvent("on"+type,element["e"+type]);
        }else{
            element["on"+type]=handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,element["e"+type]);
  element["e"+type]=null;
        }else{
            element["on"+type]=null;
        }
    }

  };