事件流及事件处理程序总结

事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段

事件捕获与事件冒泡的区别？如何阻止事件的默认行为，以及如何阻止事件冒泡？

事件捕获和事件冒泡的概念是相反的。

• 事件捕获：不具体的节点更早接收到事件，而最具体的节点最后接收到事件。“DOM2级事件”规范里面规定是从document对象开始传播，但大部分浏览器都是从window对象开始传播的。

• 事件冒泡：事件由最具体的元素开始，逐级向上传播到较为不具体的节点（document）。但大部分浏览器都冒泡到window对象。

• 取消事件默认行为：

  DOM中的event对象：在event.cancelable为true的情况下，使用event.preventDefault();方法。

  IE中的event对象：event.returnValue = false 。

• 阻止事件冒泡

  DOM的event对象：在event.bubble为true的前提下，使用event.shopPropagation()方法。这个方法不仅可以阻止事件冒泡，还可以阻止事件捕获。

  IE中的event对象：event.cancelBubble = true

事件处理程序

• HTML事件处理程序

• DOM0级事件处理程序：事件处理程序只能在冒泡阶段调用

• DOM2级事件处理程序：事件处理程序可在捕获和冒泡阶段调用

• IE事件处理程序：事件处理程序只能在冒泡阶段调用

跨浏览器事件处理程序及事件对象

var EventUtil = {

//添加事件

    addHandler: function(element, type, handler){

        if(element.addEventListener){

            element.addEventListener(type, handler, false);

        }else if(element.attachEvent){

            element.attachEvent('on' + type, handler);

        }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, handler);

        }else{

            element['on' + type] = null;

        }

    }，

    //获取eventduixiang

    getEvent: function(event){

        return event || window.event;

    },

    //获取事件的目标

    getTarget: function(event){

        return event.target || event.srcElement;

    },

    //阻止事件默认行为

    preventDefault: function(event){

        if(event.preventDefault){

            event.preventDefault();

        }else{

            event.returnValue = false;

        }

    },

    //阻止事件冒泡/捕获

    stopPropagation: function(event){

        if(event.stopPropagation){

            event.stopPropagation();

        }else{

            event.cancelBubble = true;

        }

    }

};

参数：要操作的元素、事件名称、事件处理程序函数

调用如：

EventUtil.addHandler(btn, 'click', handler);

EventUtil.removeHandler(btn, 'click', handler);