前言
从今天开始搭建自己的base.js,主要实现封装各浏览器兼容函数及常用操作。
JS中,最常见的浏览器兼容问题估计就是事件兼容问题了,比如获取事件对象、绑定事件等,我们可以将这些兼容函数放在一个全局对象EventUtil里面,减少全局变量污染,并保证随时扩充。
事件绑定
在Firefox、Chrome等支持DOM2的浏览器中,绑定事件使用的方法是addEventListener(type,handler,useCapture),三个参数分别表示事件类型、绑定事件的函数、是否在捕获阶段处理事件。
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click',function(){
alert('ok');
},false);
而在IE中,绑定事件使用的是attachEvent(type,handler),两个参数分别为事件类型、绑定事件的函数。由于IE8及以下版本只支持事件冒泡,所以绑定的事件都在事件冒泡阶段。在IE绑定事件的函数中,作用域是全局的,也就是说在绑定的事件函数中,this表示window,可使用call函数改变this指向。还有一点要注意的是,用attachEvent绑定多个相同类型的事件,后绑定的会先触发,这一点与DOM标准的刚好相反。
var btn1 = document.getElementById('btn1');
btn1.attachEvent('onclick',function(){ //事件类型要加on
alert('ok');
alert(this); //window
});
综上,兼容的事件绑定及事件移除函数如下:
var EventUtil = {
//绑定事件
addHandler: function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false); //DOM2级,为保证浏览器兼容,在冒泡阶段处理事件
} else if(element.attachEvent) {
element.attachEvent('on'+type,function(){ //IE
handler.call(element); //修复IE中的this指向
});
} else {
element['on' + type] = handler; //DOM0级
}
},
// 解除事件绑定
removeHandler:function(element,type,handler) {
if(element.removeEventListener) {
element.removeEventListener(type,handler,false); //DOM2
} else if(element.detachEvent) {
element.detachEvent('on'+type, handler); //IE
} else {
element['on'+type] = null; //DOM0
}
}
}
注意:绑定匿名函数的事件无法移除,因为绑定事件的解除绑定的参数必须完全一样才能解除,可以将代码用函数封装,传递函数的引用给事件函数。如以下代码先绑定后移除,点击没有反应:
function test() {
alert('test');
}
EventUtil.addHandler(document,'click',test);
EventUtil.removeHandler(document,'click',test);
获取事件对象
IE下用DOM0级on绑定事件,事件对象是window的属性,即window.event,而用attchEvent绑定的事件会在事件函数中传入一个事件对象并且window.event也可访问。
//IE
btn1.onclick = function(ev) {
alert(ev); //undefined
}
btn1.attachEvent('onclick',function(ev){
alert(ev.target === window.event.target); //true
});
而在Firefox和Chrome下会在事件函数中传入事件对象,兼容的做法如下:
//获取事件对象
getEvent: function(event) {
//IE下DOM0级事件不会传入event对象,而是用window.event,attachEvent会传入并且也有window.event
//DOM2会传入event
return event?event:window.event;
}
获取目标对象
// 获取目标对象,引发事件的对象
getTarget:function(event) {
//srcElement是IE专有
return event.target || event.srcElement;
}
阻止默认行为
// 阻止默认行为
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault(); //DOM
} else {
event.returnValue = false; //IE
}
},
阻止冒泡
// 阻止冒泡
stopPropagation:function(event) {
if(event.stopPropagation) {
event.stopPropagation(); //DOM,Firefox,Chrome
} else {
cancelBubble = true; //IE
}
},
获取事件相关对象
如对某个元素监听mouseover事件时,鼠标是从另外一个元素移到该元素,这里可以获取另外一个元素。在Firefox和Chrome中,相关对象保存在event的relatedTarget属性中,IE则分成两个,一个是event.toElement,另一个是event.fromElement,两个选其一。
// 获取相关元素
getRelatedTarget:function(event) {
if(event.relatedTarget) {
return event.relatedTarget; //DOM
} else if(event.toElement) {
return event.toElement; //IE的到某个元素
} else if(event.fromElement) {
return event.fromElement; //IE的从哪个元素来
} else {
return null;
}
},