Js跨浏览器的dom事件封装
上次的 《JS面试题 跨浏览器的事件处理函数的绑定和解绑定》一文中提供的跨浏览器事件处理函数的绑定中缺失了对event对象的跨浏览器处理。这里对它进行补完。
在兼容DOM的浏览器中，无论使用DOM0级(element.onXXX=handler)还是DOM2级(element.addEventListener)来绑定事件处理函数，event对象都会作为事件处理函数的参数被传入。然而在IE中，使用DOM0级方法绑定事件处理函数却没有将event对象当做参数传入，而是作为window对象的一个属性存在。因此，跨浏览器获得一个事件对象需要如下的代码
element.onclick = function (event){
event = event || window.event;
}
标准的event对象包含以下属性及方法
属性/方法 类型 读/写 说明
bubbles Boolean 只读 表明事件是否会冒泡
cancelable Boolean 只读 表明是否可以取消事件的默认行为
currentTarget Element 只读 即绑定该事件处理函数的元素，不一定是事件的目标元素，因为事件可以冒泡至绑定了相应事件的上层元素
eventPhase Integer 只读 调用事件处理程序的阶段：1.捕获阶段2.处于目标3.冒泡阶段
typeString 只读 事件类型
target Element 只读 事件的目标元素，例如点击的dom中最深层次的元素
preventDefault Function 只读 取消事件的默认行为的方法。只有事件的cancelable为true时调用此方法才有效。
stopPropogation Function 只读 取消事件的进一步冒泡或捕获。
而IE的事件对象包含如下属性
属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 默认值为false，将其设置为true就可以阻止事件冒泡。
returnValue Boolean 读/写 默认为true，将其设置为false就可以取消事件的默认行为，但没有其他属性可以说明是否有效。
typeString 只读 事件类型
srcElement Element 只读 事件的目标元素，与DOM事件中的target属性一样。
基于上述对比，需要兼容处理的属性和方法有event.target 和event.srcElement ，event.stopPropogation 和event.cancelBubble ，event.preventDefault 和event.returnValue 。可以提供一个跨浏览器的事件对象类型来处理兼容问题。
1
LIZ.dom.Event = function ( event ){
2
event = event || window.event;
3
this.type = event.type;
4
this.target = event.target || event.srcElement;
5
6
this.preventDefault = function (){
7
if ( event.preventDefault ){
8
event.preventDefault();
9
} else {
10
event.returnValue = false;
11
}
12
};
13
14
this.stopPropogation = function (){
15
if ( event.stopPropogation ){
16
event.stopPropogation();
17
} else {
18
event.cancelBubble = true;
19
}
20
};
21
22
//为提供一点灵活性，此处提供一个getEvent方法返回真正的event对象
23
this.getEvent = function (){
24
return event;
25
};
26
27
return this;
28
};
这样在LIZ.dom.addEventListener的处理中对向其注册的事件处理函数传入使用LIZ.dom.Event类型处理过的event对象，就可以在事件处理函数中使用跨浏览器的事件对象了。
1
addEventListener : function (element, type, handler){
2
3
var observer = this.getData(element, 'observer'),
4
proxyHandler = function (event){
5
observer.fire( new LIZ.dom.Event( event ) );
6
};
7
if( !observer || !(observer instanceof LIZ.patterns.Observer) ){
8
observer = new LIZ.patterns.Observer(element);
9
this.setData(element, 'observer', observer);
10
}
11
if( typeof observer[type] == 'undefined' ){
12
if( element.addEventListener ){
13
element.addEventListener(type, proxyHandler, false);
14
} else if ( element.attachEvent ){
15
element.attachEvent('on'+type, proxyHandler);
16
} else {
17
element['on'+type] = proxyHandler;
18
}
19
}
20
observer.addListener(type, handler);
21
}
补充：web前端 , JavaScript ,
