事件是JavaScript的重要组成部分,但是兼容问题一直困扰我们的程序员同学,整理跨浏览器的事件相关内容,供大家参考,本文是学习高程3后总结.
事件分类
DOM 0 级 事件
通俗一点就是采用 "on" + eventType 的方式为元素绑定事件,写法简单,具有跨浏览器的优势,现代浏览器全部支持,使用DOM0级方法指定事件处理程序被人为是元素的方法,事件处理程序是在元素的作用域中运行的,程序中的this指向被绑定事件的元素. <br />DOM 2 级 事件
定义了两种方法,用于事件的添加和删除处理,
即: addEventListener( type, handler, boolean )
removeEventLisrener( type, handler, boolean ),
第三个参数为boolean值,如果为true表示在事件的捕获阶段调用事件处理程序,反之在时在冒泡阶段调用事件处理程序. 通过addEventListener()添加的事件只能通过removerEventListener()来移除.addEventListener()主要的好处是能够添加多个事件,并且多个事件的执行书序是按照书写的顺序执行 <br />IE 事件
IE中实现了类似于DOM2 级中的方法,绑定事件方法attachEvent(),移除事件detachEvent(), 都接收两个参数事件名称和事件处理程序,区别于DOM2级事件,IE中的事件名称需要在事件名前面加一个"on",利用detachEvent()移除事件时需要传入相同的参数才行. !注意:通过这个方法绑定事件处理程序是在全局中运行,this执行window.并且,当使用attachEvent()多次为同一对象绑定事件时,事件的程序代码的书写顺序是相反的.
跨浏览器事件封装
var EventUtil = {
// 1.添加事件处理程序 参数1: 事件添加元素, 参数2: 事件类型, 参数3: 事件处理程序
addHandler: function ( ele, type, handler) {
// DOM2级方法
if ( ele.addEventListener ) {
// 第三个参数 false 表示在冒泡阶段调用处理程序,
ele.addEventListener( type, handler, false);
// IE事件方法
} else if ( ele.attachEvent ) {
ele.attachEvent( "on" + type, handler);
// DOM 0级事件方法法
} else {
ele["on" + type] = handler;
}
},
// 2.事件参数对象
getEvent: function ( event ) {
return event ? event : window.event;
}
// 3.事件目标
getTarget: function ( event ) {
return event.target || event.srcElement;
}
// 4.阻止默认行为
preventDefault: function ( event ) {
if ( event.preventDefault ) {
event.preventDefault();
} else {
// 简单的写法可以是 return false
event.returnValue = false;
}
}
// 5.解绑事件
removeHandler: function ( ele, type, handler ) {
// DOM2 级事件解绑
if ( ele.removeEventListener ) {
ele.removeHandler( type, handler, false );
} else if ( ele.detachEvent ) {
ele.detachEvent( "on" + type, handler );
} else {
ele.[ "on" + type ] = null;
}
}
// 6.阻止冒泡
stopPropagation: function ( event ) {
// DOM 事件
if ( event.stopPropagation ) {
event.stopPropagation();
// IE
} else {
event.cancelBubble = true;
}
}
}
