首页 > 代码库 > 搭建自己的base.js(1)
搭建自己的base.js(1)
前言
从今天开始搭建自己的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);
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。