JavaScript 跨浏览器事件处理封装详解

跨浏览器事件处理概述

在 Web 开发中，调用事件是交互的核心。

事件对象模型差异

事件对象是触发 DOM 元素事件时自动生成的对象，例如鼠标点击时，系统会记录点击类型及触发该事件的元素。在标准 DOM 模型中，event 对象的 type 属性用于获取事件类型，target 属性用于获取事件目标元素，stopPropagation() 方法用于阻止事件冒泡，preventDefault() 方法用于阻止事件的默认行为。而在 IE 浏览器中，事件对象的结构略有不同：type 属性同样用于获取事件类型，srcElement 属性用于获取事件目标元素，cancelBubble 属性设置为 true 可阻止事件冒泡，false 则不阻止；此外，通过设置 returnValue 属性为 false 可以阻止事件的默认行为。

// 兼容各个浏览器 跨浏览器事件处理------- 统一进行封装
var EventHandle = {
// element : 元素 ， type： 点击事件 ，handle ： 实行的方法
//添加句柄
addEventHandle: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);//---false //代表冒泡 dom2级
        }
else if (element.attachEvent) {
element.attachEvent("on"+type, handler);
} else {
element["on" + type] = handler;
        }
    },
//删除句柄 事件处理不起作用
removeEventHandle: function (element, type, handler) {
if (element.removeEventListener) { // 支持dom2级的事件处理 type是 onclick
element.removeEventListener(type, handler, false); //---false //代表冒泡
        }
else if (element.detachEvent) {
element.detachEvent("on"+type, handler); //支持IE
} else {
element["on" + type] = null;// dom0级事件处理 传统的点击事件
        }
    },
//获取事件对象 兼容浏览器的所有对象
getEvent: function (event) {
return event ? event : window.event; //在IE浏览器的低版本中需要的是window.event
    },
//获取事件类型 是点击呢还是鼠标移动
getType:function(event){
return event.type;
    },
//获取当前的那个元素
getElement: function (event) {
return event.target || event.srcElement;
    },
//阻止事件的默认行为
: function (event) {
if (event.preventDefault) {
event.preventDefault();
        }
else {
event.returnValue = false;
        }
    },
//阻止事件冒泡
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
        }
else {
event.cancelBubble = true;
        }
    }
}