搭建自己的base.js(1)
浏览数：34 /
时间：2015年06月09日
前言
从今天开始搭建自己的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);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
