浅谈JavaScript的事件（事件对象）

　　在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中，会包含鼠标的位置信息。而键盘触发的事件会包含与按下的键有关信息。所有浏览器都支持event对象，但支持方式不同。

• DOM中的事件对象

　　兼容dom的浏览会将一个event对象传递到事件处理程序中。

var aa=document.getElementById("aa");
            aa.onclick=function(event){
                console.log(event.type);
            }
            aa.addEventListener("click",function(event){
                console.log(event.type);
            },false);

　　上面的代码，通过两种方式指定事件处理程序，但是他们可以获得event对象。event.type都是输出click。

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序正在处理的那个元素
defaultPrevented	Boolean	只读	是否已经调用了preventDefault方法
detail	Integer	只读	事件的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段
preventDefault()	Function	只读	取消事件的默认行为
stopImmediatePropagation()	Function	只读	取消事件的进一步捕获或者冒泡
stopPropagation()	Function	只读	取消事件的进一步冒泡或者捕获
target	Element	只读	事件的目标
trusted	Boolean	只读	为true表示事件是浏览器生成，false表示JavaScript添加
type	String	只读	被触发事件的类型
view	AbstarctView	只读	与事件关联的抽象视图

　　上面的表格列出了event的属性以及方法，在事件处理程序内部，对象this始终等于currentTarget的值，而target则包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、target和currentTaget包含相同的值。

aa.addEventListener("click",function(event){
                console.log(event.target==this);//true
                console.log(event.currentTarget==this);//true
            },false);

　　上面的代码中说明currentTarget、target和this的值是相同的。通过下面的代码，我们可以看出this就是指向元素本身。

aa.addEventListener("click",function(event){
                //console.log(event.target==this);//true
                //console.log(event.currentTarget==this);//true
                console.log(this==document.getElementById("aa"));//true
                console.log(event.currentTarget==document.getElementById("aa"));//true
            },false);

　　要阻止特定事件的默认行为，可以使用preventDefault方法。例如a标签，在点击的时候，会跳转到指定的url链接，如果想阻止该行为的发生，可以调用preventDefault方法。

document.getElementById("hh").onclick=function(event){
                event.preventDefault();
            }

　　上面的代码将会阻止跳转事件的发生。只有cancelable为true，才能调用该方法。通过调用stopPropagation方法能够阻止事件的冒泡。

document.getElementById("hh").onclick=function(event){
                console.log(event.eventPhase);//2
                event.preventDefault();
            }
            document.body.onclick=function(event){
                console.log(event.eventPhase);//3
            }
            document.body.addEventListener("click",function(event){
                console.log(event.eventPhase);//1
            },true);

　　上面的代码中输出是1,2,3。由此可见，document.body.addEventListener最先执行，它发生在事件的冒泡阶段，document.getElementById("hh")第二个执行，发生在事件的处理程序目标阶段。document.body.onclick发生在事件的冒泡阶段。

• IE中的事件对象

　　在IE中方式event对象可以通过多种方式，取决于指定事件处理程序的方法。

aa.onclick=function(){
                var event=window.event;
                console.log(event.type);
            }

　　上面的代码，我们通过window.event获取了event对象，并且可以取得它的属性和方法。但是如果通过attachEvent添加事件，则事件处理程序会传递一个event对象。

　　IE的event对象同样包含创建它的相关属性和方法，与DOM事件一样，也会因为事件类型的不同而不同。

属性/方法	类型	读写	说明
cancelBubble	Boolean	读/写	默认false，设置为true，取消事件冒泡
returnValue	Boolean	读/写	默认为true，设置为false，取消事件的默认行为
srcElement	Element	只读	事件的目标，与target相同

　　因为事件处理程序的指定方式不同，故它的作用域也不相同。最好不用this，可以使用srcElement来获取元素。

　　如前所述，returnValue属性相当于DOM中的preventDefault方法，它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false，就会阻止默认事件的发生。

EventUtil.addEvent(document.getElementById("hh"),"click",function(event){
                event.returnValue=false;
            });

• 跨浏览器的事件对象

　　虽然DOM与IE的event对象不同，但是可以通过js库，来解决浏览器的兼容性。

　　

var EventUtil={
                /**
                 * 添加事件
                 * @param {Object} element：元素本身
                 * @param {Object} type：事件名称
                 * @param {Object} fn：事件处理程序
                 */
                addEvent:function(element,type,fn){
                    if(element.addEventListener){
                        element.addEventListener(type,fn,false);
                    }
                    else if(element.attachEvent){
                        element.attachEvent("on"+type,fn);
                    }
                    else{
                        element["on"+type]=fn;
                    }
                },
                /**
                 * 移除事件
                 * @param {Object} element：元素本身
                 * @param {Object} type：事件名称
                 * @param {Object} fn：事件处理程序
                 */
                removeEvent:function(element,type,fn){
                    if(element.removeEventListener){
                        element.removeEventListener(type,fn,false);
                    }
                    else if(element.detachEvent){
                        element.detachEvent("on"+type,fn);
                    }
                    else{
                        element["on"+type]=null;
                    }
                },
                /**
                 * 获取事件对象
                 * @param {Object} event
                 */
                getEvent:function(event){
                    return event||window.event;
                },
                /**
                 * 获取事件处理程序作用的目标元素
                 * @param {Object} event
                 */
                getTarget:function(event){
                    return event.currentTarget||event.srcElement;
                },
                /**
                 * 取消默认行为
                 * @param {Object} event
                 */
                preventDefault:function(event){
                    if(event.preventDefault){
                        event.preventDefault();
                    }
                    else{
                        event.returnValue=false;
                    }
                },
                /**
                 * 取消冒泡
                 * @param {Object} event
                 */
                stopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }
                    else{
                        event.cancelBubble=true;
                    }
                }
            };

　　上面的代码封装了事件处理中需要的方法，包括添加事件、移除事件、获取事件对象、获取事件的目标元素、阻止默认行为和阻止冒泡。