javaScript事件

JavaScript与HTML之间的交互是经过事件来实现的，IE九、chrome、FireFox、Opera、Safari 均实现了DOM级规范中定义的标准DOM事件，而IE8及IE8如下版本仍然保留着专有的事件处理方式（DOM0事件）。

一、一些基本概念：

• 事件：文档或浏览器窗口中发生的一些特定的交互瞬间。

可使用侦听器（或处理程序）来预约事件，以便事件发生时执行相应的代码。

• 事件流：从页面接受事件的顺序。

IE的事件流是事件冒泡，Netscape开发团队提出的事件流是事件捕获；“DOM2级事件”规定的事件流包括三个阶段：事件捕获 --> 处于目标 --> 事件冒泡

• 事件捕获：事件开始时从不太具体的节点先接收事件，而后向下传播到最具体的节点，其用意在于在事件到达预约目标以前捕获它。
• 事件冒泡：事件开始时从最具体的元素（文档中嵌套层次最深的那个节点）接收，而后逐级向上传播到较为不具体的节点（文档）。

不是全部的事件都能冒泡，例如：blur、focus、load、unload.

二、监听/移除事件的方法：

• element.addEventListener(type, listener[, useCapture]) element.removeEventListener(type, listener[, useCapture]) // 支持捕获和冒泡，但IE8及IE8如下不支持， 其余IE9及以上和其余浏览器均支持，默认是false（冒泡阶段执行） true(捕获阶段产生)
• element.attachEvent('on'+type, listener) element.detachEvent('on'+type, listener) // 只支持冒泡，只IE6-IE10支持，IE11不支持，其余浏览器不支持
• element['on'+type] = function(){} // 只支持冒泡, 全部浏览器支持, 但不支持对同一个元素的同一事件注册多个监听器

三、事件对象event：

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着全部与事件有关的信息。包括致使事件的元素、事件的类型以及其余与特定事件相关的信息。全部的浏览器都支持event对象，但支持方式不一样。

• 至少支持“DOM2级事件”的浏览器中事件的事件对象，所包含的属性和方法：

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	代表事件是否冒泡
cancelable	Boolean	只读	代表是否能够取消事件的默认行为
currentTarget	Boolean	只读	其事件处理程序当前正在处理事件的那个元素
defaultPrevented	Boolean	只读	只读 为true时表示已经调用了preventDefault() (DOM3级事件中新增)
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序时的事件流阶段：1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段
target	Element	只读	事件的目标
trusted	Boolean	只读	true表示事件是浏览器生成的，false表示事件是开发人员经过JavaScript建立的（DOM3级事件中新增）
type	String	只读	事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象。
preventDefault()	Function	只读	取消事件的默认行为。若是cancelanle为true，则可使用这个方法
stopPropagation()	Boolean	只读	取消事件的进一步捕获或冒泡。若是bubbles为true，则可使用这个方法。
stopImmediatePropagation()	Boolean	只读	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）

• IE中的事件对象 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认为false，但将其设置为true时就能够取消事件冒泡
returnValue	Boolean	读/写	默认为true，但将其设置为false时就能够取消事件的默认行为
srcElement	Element	只读	事件的目标
type	String	只读	事件的类型

跨浏览器的事件处理程序

var EventUtil = {
    getEvent: function(event){
        return event || window.event;       // IE、chrome、360二者皆有，firefox只有event
    },
    getTarget: function(event){
        var evt = this.getEvent(event);
        return evt.target || evt.srcElement;
    },
    preventDefault: function(event){
        var evt = this.getEvent(event);
        if(evt.preventDefault){
            evt.preventDefault();
        }else{
            evt.returnValue = false;
        }
    },
    stopPropagation: function(event){
        var evt = this.getEvent(event);
        if(evt.stopPropagation){
            evt.stopPropagation();
        }else{
            evt.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);//好处：一、以attachEvent绑定事件，事件处理函数的做用域为window，经过call方法，改变做用域；2，方法注册到element上，方便移除事件处理函数；坏处：一个元素上的同一事件只能绑定一次
            };
            element.attachEvent('on'+type, element['e'+type]);
        }else{
            element['on'+type] = handler;
        }
    },
    removeHandler: function(element, type, handler){
        if(element.removeEventListener){
            element.remoeEventListener(type, handler, false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type, element['e'+type]);
            element['e'+type] = null;
        }else{
            element['on'+type] = null;
        }
    },
    /*
    * 获取鼠标按钮的值
    * DOM模型下的button属性：0表示主鼠标按钮 1表示中间的鼠标按钮（中间滚轮） 2表示次鼠标按钮
    * IE8及以前版本也提供了button属性，可是与DOM的button属性有很大差异，具体以下
    * 0：没有按下按钮  1：按下了主鼠标按钮  2：按下了次鼠标按钮  3：同时按下了主、次鼠标按钮  4：按下了中间的鼠标按钮  5：同时按下了主鼠标和中间鼠标按钮
    * 6：同时按下了次鼠标和中间鼠标按钮  7：同时按下了三个鼠标按钮
    */
    getMouseButton: function(event){
        var evt = this.getEvent(event);
        if(document.implementation.hasFeature("MouseEvents", "2.0")){
            return evt.button;
        } else {
            switch(evt.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 1;
                case 4:
                    return 2;    
            }
        }
    },
     /*
    * 获取鼠标滚动时的wheelDelta
    * 浏览器兼容性说明：
    * 一、IE、chrome、Opera和Safari都实现了mousewheel事件，Opera 9.5 以前的版本，wheelDelta值的正负号是颠倒的；当用户向前滚动鼠标滚轮时，wheelDelta时120的倍数，向后滚动则是-120的倍数
    * 二、fireFox支持的是一个名为DOMMouseScroll的相似事件，当用户向前滚动鼠标滚轮时，wheelDelta时3的倍数，向后滚动则是-3的倍数
    */
    getWheelDelta: function(event){
        var evt = this.getEvent(event);
        if(evt.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -evt.wheelDelta : evt.wheelDelta);
        } else {
            return  -evt.detail * 40;
        }
    }
    
}