JavaScript之DOM和IE事件的区别

字数 228阅读 332

JavaScript和HTML之间的交互是通过事件来实现的。事件流描述的是从页面中接收事件的顺序。
IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流,而DOM的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件冒泡是指事件开始时是由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档);
事件捕获是指由不太具体的节点先接收到事件,而最具体的节点应该最后接收到事件。

事件捕获和事件冒泡

DOM事件和IE事件的区别

DOM IE
添加事件 addEventListener(type, handler, false/true) attachEvent('on'+type, handler)
移除事件 removeEventListener(type, handler, false/true) detachEvent('on'+type, handler)
event对象 event = event event = window.event
事件的目标 event.target event.srcElement
取消事件默认行为 event.preventDefault() event.returnValue = false
取消冒泡 event.stopPropagation() event.cancelBubble = true

基于DOM和IE事件的区别,可以得到一个跨浏览器的事件处理程序:

var EventUtil = {
    // 绑定事件
    addHandler: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if(element.attchEvent) {
            element.attachEvent('on'+type, handler);
        } else {
            element['on'+type] = handler;
        }
    },

    // 获取event对象
    getEvent: function(event) {
        return event ? event : document.event;
    },

    // 获取事件目标
    getTarget: function(event) {
        return event.target || event.srcElement;
    },

    // 取消事件默认行为
    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    // 移除事件
    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;
        }
    },

    // 取消事件冒泡
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

推荐阅读更多精彩内容