您的位置:知识库 » Web前端

事件模块的演变

作者: snandy  来源: 博客园  发布时间: 2011-04-12 10:40  阅读: 2056 次  推荐: 0   原文链接   [收藏]  

  上一篇我们封装了一个addEvent:

  1,解决了IE6/7/8下事件handler中this为window的错误。

  2,并且统一了事件对象作为事件handler的第一个参数传入。

  这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实际上被包装了,IE6/7/8中真正的handler是el["e"+fn]。因此删除时要用到它。同时将两个方法挂在一个对象E上,add,remove分别添加和删除事件。

E = {
//添加事件
add : function(el, type, fn){
if(el.addEventListener){
el.addEventListener(type, fn,
false);
}
else{
el[
'e'+fn] = function(){
fn.call(el,evt);
};
el.attachEvent(
'on' + type, el['e'+fn]);
}
},
//删除事件
remove : function(el, type, fn){
if(el.removeEventListener){
el.removeEventListener(type, fn,
false);
}
else if(el.detachEvent){
el.detachEvent(
'on' + type, el['e'+fn]);
}
}
};

  可以看到,标准浏览器如IE9/Firefox/Safari/Chrome/Opera会使用addEventListener/removeEventListener添加/删除事件,IE6/7/8则使用attachEvent/detachEvent。标准浏览器中事件handler是传入的第三个参数fn,IE6/7/8中则是包装后的el["e"+fn]。

  好了,已经拥有了添加,删除事件两个方法,并且解决了各浏览器下中的部分差异,现再添加一个主动触发事件的方法dispatch。该方法能模拟用户行为,如点击(click)操作等。 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法。因为可能会出现异常,使用了try catch。

E = {
//添加事件
add : function(el, type, fn){
if(el.addEventListener){
el.addEventListener(type, fn,
false);
}
else{
el[
'e'+fn] = function(){
fn.call(el,window.event);
};
el.attachEvent(
'on' + type, el['e'+fn]);
}
},
//删除事件
remove : function(el, type, fn){
if(el.removeEventListener){
el.removeEventListener(type, fn,
false);
}
else if(el.detachEvent){
el.detachEvent(
'on' + type, el['e'+fn]);
}
},
//主动触发事件
dispatch : function(el ,type){
try{
if(el.dispatchEvent){
var evt = document.createEvent('Event');
evt.initEvent(type,
true,true);
el.dispatchEvent(evt);
}
else if(el.fireEvent){
el.fireEvent(
'on'+type);
}
}
catch(e){};
}
};

  这就是整个事件模块的雏形,往后还有很多需要补充完善的地方。但对于普通的应用,这几个函数足以胜任。

0
0
标签:JavaScript

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻