/**
检查该元素obj在数组中的位置
*/
Array.prototype.indexOf=function(obj){
var length=this.length,i=length-1;
for(;i>=0;i--){
if(this[i]==obj){
return i;
}
}
return -1;
}
/**
判断该元素obj在数组中是否存在
*/
Array.prototype.contains=function(obj){
return (this.indexOf(obj)>=0);
}
/**
在数组中添加元素,如果包含该元素将不添加
*/
Array.prototype.append=function(obj){
if(!(true&&this.contains(obj))){
this[this.length]=obj;
}
}
/**
删除该元素obj,并返回删除元素
*/
Array.prototype.remove=function(obj){
var index=this.indexOf(obj);
if(index<0){
return;
}else{
return this.splice(index,1);
}
}
var EasyJs={};
EasyJs.event={
add:function(element,type,fun){
//判断是否是空白节点和注释
if(element.nodeType==3||element.nodeType==8){
return;
}
//ie不能传入window对象,需要复制一下
//if("isIE"&&target.setInterval){
// target=window;
//}
if(!element.events){
element.events={};
}
var handlers=element.events[type];
if(!handlers){
handlers=element.events[type]=[];
if(element['on'+type]){
handlers[0]=element['on'+type];
}
}
handlers.append(fun);
element['on'+type]=this.handleEvent;
},
handleEvent:function(){
return function(event){
event=event||EasyJs.event.fixEvent(window.event);
var handlers=this.events[event.type],length=handlers.length;
for(var i=0;i<length;i++){
if(handlers[i].call(this,event)===false){
return false;
}
}
return true;
}
}(),
fixEvent:function(event){
event.preventDefault=this.fixEvent.preventDefault=function(){this.returnValue=false};
event.stopPropagation=this.fixEvent.stopPropagation=function(){this.cancelBubble=true};
return event;
},
remove:function(element,type,fun){
if(element.events&&element.events[type]){
element.events[type].remove(fun);
}
},
fire:function(){
return function(element,type,args){
if(element.events){
var handlers=element.events[type];
if(handlers){
var length=handlers.length;
if(!args){
args=[];
}
for(var i=0;i<length;i++){
if(handlers[i].apply(element,args)===false){
return false;
}
}
}
}
return true;
}
}()
};
如何调用
<div id="ceshi" style="height:40px; width:40px; background-color:#000">hheheh</div>
<script>
EasyJs.event.add(document.getElementById("ceshi"),"cccc",function(r,c){alert(this.innerHTML+r+c)});
EasyJs.event.add(document.getElementById("ceshi"),"cccc",function(r){alert(123+r)});
EasyJs.event.fire(document.getElementById("ceshi"),"cccc",["cccc","bbbb"]);
EasyJs.Event.add(document.getElementById("ceshi"),"click",function(){alert(this.innerHTML)});
</script>
分享到:
相关推荐
1.实现JavaScript事件注册; 2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
第3章+JavaScript事件处理.pdf
javascript 事件处理
第6章 JavaScript中的事件与事件处理
JavaScript入门教程 JavaScript事件处理
相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结(三)js事件对象 一、事件处理
事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 – 启动事件处理程序 – 事件处理程序作出反应。其中,要使事件处理...
Javascript_事件处理,讲解了JAVASCRIPT事件开发中注意的事项,步骤,有条理的讲解
一、什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。 事件可能是用户在某些内容上的点击、鼠标经过...
本文实例讲述了JavaScript(js)处理的HTML事件、键盘事件、鼠标事件。分享给大家供大家参考,具体如下: 示例代码: HTML文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
主要介绍了javascript 事件处理示例分享,需要的朋友可以参考下
JavaScript 的事件处理
主要为大家详细介绍了JavaScript事件处理程序的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
javascript 事件处理程序介绍,学习js的朋友可以参考下
第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型 DOM 第6章 String Math Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象">该资源为8个PDF文档教程 适合JS开发初学者 ...
相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结(三)js事件对象 鼠标事件 D
主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等相关处理程序与操作技巧,需要的朋友可以参考下
一个简单的示例来演示如何使用自定义的eventUtil对象,javascript事件处理函数
相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结(三)js事件对象 //www.