1.事件流的区别
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件
示例：
复制代码代码如下:
<body>
<div>
<button>点击这里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
2.事件侦听函数的区别
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定
bCapture参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。
综合示例：
// 把所有方法封装到一个对象里面，充分考虑兼容写法
var EventUtil = {
// 添加DOM事件
addEvent: function (element, type, handler) {
if (element.addEventListener) { //DOM2级
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //IE
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
// 移除DOM事件
removeEvent: function (element, type, handler) {
if (element.removeEventListener) { //DOM2级
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) { //IE
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
// 阻止事件冒泡
stopPropagation: function (ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 阻止默认事件
preventDefault: function (ev) {
if (ev.preventDefault) {
ev.preventDefaule();
} else {
ev.returnValue = false;
}
},
// 获取事件源对象
getTarget: function (ev) {
return event.target || event.srcElement;
},
// 获取事件对象
getEvent: function (e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
var btn = document.getElementById("id");
var handler = function (event) {
event = EventUtil.getEvent(event);
};
EventUtil.addEvent(btn, "click", handler);
近期评论