JavaScript之DOM和IE事件的区别

最新推荐文章于 2020-11-04 20:06:09 发布

原创最新推荐文章于 2020-11-04 20:06:09 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

JavaScript中的事件处理涉及DOM事件流和IE事件流的概念。DOM事件流包括捕获、目标和冒泡三个阶段，而IE仅支持冒泡。理解这些差异对于创建跨浏览器兼容的事件处理程序至关重要。

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;
        }
    }
}