Javascript处理DOM元素事件实现代码_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript处理DOM元素事件实现代码_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含7181字,纯文字阅读大概需要11分钟。
内容图文
![Javascript处理DOM元素事件实现代码_javascript技巧](/upload/InfoBanner/zyjiaocheng/316/34bbbbe4ba3d482cae46b2ae998bf65a.jpg)
/*
* 功能:事件处理
* Author:LQB
* 时间:2009-1-4
* #include JCore.js
*/
var JEvents = function(){
this.events={};
this.addEvent = function(o){//添加事件
if(typeof o == 'string'){/*strArg1,strArg2……的方式传递参数*/
for(var i = 0, a = arguments, v; v = a[i]; i++){
v = v.toString().toLowerCase();
var enFX = v.indexOf("on")==0 ? v.substr(2) : v;
if(!this.events[enFX]){
this.events[enFX] = true;
}
}
}else{
JCore.apply(this.events, o,false);
}
};
this.addListener = function(eventName,fn,scope/*,Args……*/){//为事件添加处理方法
if(typeof(eventName)!="string"|| eventName.lenght==0)return;
if(typeof(fn)!="function")return;
eventName = eventName.toString().toLowerCase();
var enFX = eventName.indexOf("on")==0 ? eventName.substr(2) : eventName;
if(!this.events[enFX]){
throw "Error! Event /"" + eName + "/" doesnt exist."
}
var sp = scope||window;
var callArgs = Array.prototype.slice.call(arguments, 3);//从第4个参数开始
callArgs = typeof(callArgs)!="undefined"?callArgs:[];
var delegate = fn.createDelegate(callArgs,sp);//JCore支持
//为fn方法创建标记,在删除事件时使用
if(!fn.uid) {
var time = new Date();
fn.uid= ""+time.getMinutes()+time.getSeconds()+time.getMilliseconds();
}
//标记委托,在删除事件绑定时使用
delegate.uid = getCacheAttName(enFX,fn.uid);
if(typeof(this.events[enFX])!="object")
this.events[enFX]=[];
this.events[enFX].push(delegate);//把方法添加到事件列表中
};
this.removeListener = function(eventName,fn){//移除事件绑定
if(eventName && fn){
eventName = eventName.toString().toLowerCase();
var enFX = eventName.indexOf("on")==0?eventName.substr(2):eventName;
var AttName = getCacheAttName(enFX,fn.uid);
if(typeof(this.events[enFX])=="object"){//存在这个事件
var functions = this.events[enFX];
for(i=0;i<functions.length;i++){//依次查找每个方法
if(functions[i].uid===AttName){//找到,删除
this.events[enFX].remove(functions[i]);
break;
}
}
}
}
}
this.fireEvent = function(eName,eventArg){//触发事件
eName = eName.toString().toLowerCase();
var enFX = eName.indexOf("on")==0 ? eName.substr(2) : eName;
var Arg = new Array();
if(typeof(eventArg)!="undefined"){
if(typeof(eventArg)=="array") Arg=eventArg;
else Arg.push(eventArg);
}
if(typeof(this.events[enFX])=="object"){//存在此事件,同时添加了事件处理方法
var functions = this.events[enFX];
for(i=0;i<functions.length;i++){//依次触发所有方法
functions[i].apply(window,Arg);
}
}
}
/*---------------------------------------私有方法--------------------------------------*/
var getCacheAttName = function(eventName,fnuid){
return "handle-"+eventName+"-"+fnuid;
}
}
/*------------------------------------------------------以下是静态方法,用于处理DOM element的事件-----------------------------------------*/
var JEventsExtendMethod = {
cache : {//时间处理缓存,用于标记各个事件处理方法,在删除事件时使用
eventCache : {},
setCache : function(el,Name,value){
if(typeof(this.eventCache[el])!="object"){
this.eventCache[el]={length :1};
}
this.eventCache[el][Name]=value;
this.eventCache[el].length++;
},
getCache : function(el,Name){
if(typeof(this.eventCache[el]) =="object")
return this.eventCache[el][Name];
else
return null;
},
removeCache : function(el,Name){
if(typeof(this.eventCache[el]) =="object"){
delete this.eventCache[el][Name];//删除属性
this.eventCache[el].length--;
}
if(this.eventCache[el] && this.eventCache[el].length ==1)//清除
delete this.eventCache[el];
}
},
getCacheAttName : function(eventName,fnuid){
return "handle-"+eventName+"-"+fnuid;
},
bind : function(el,eventName,fn,scope/*,Args……*/){//为elment添加事件处理方法
if(typeof(el)=="undefined"||el==null)return;
if(typeof(eventName)!="string"|| eventName.lenght==0)return;
if(typeof(fn)!="function")return;
var indexOfon = eventName.toString().toLowerCase().indexOf("on");
var enIE = indexOfon==0?eventName:"on"+eventName;
var enFX = indexOfon==0?eventName.substr(2):eventName;
var sp = scope||window;
var callArgs = Array.prototype.slice.call(arguments, 4);//从第5个参数开始
callArgs = typeof(callArgs)!="undefined"?callArgs:[];
var delegate = fn.createDelegate(callArgs,sp);//JCore支持
if (el.addEventListener){//Mozilla系列,按队列顺序执行
el.addEventListener(enFX, delegate, false);//第三个参数与触发方式相关
} else if (el.attachEvent){//非Mozilla系列,按堆栈顺序执行(后加的事件先执行)
el.attachEvent(enIE, delegate);
}
//为fn方法创建标记,在删除事件时使用
if(!fn.uid) {
var time = new Date();
fn.uid= ""+time.getMinutes()+time.getSeconds()+time.getMilliseconds();
}
if(!el.id){
el.id = JCore.id(el,null);
}
//标记委托,在删除事件绑定时使用
var AttName = this.getCacheAttName(enFX,fn.uid);
this.cache.setCache(el.id,AttName,delegate);
},
unbind : function(el,eventName,fn){//为elment解除事件绑定
if(typeof(el)=="undefined"||el==null)return;
var indexOfon = eventName.toString().toLowerCase().indexOf("on");
var enIE = indexOfon==0?eventName:"on"+eventName;
var enFX = indexOfon==0?eventName.substr(2):eventName;
var AttName = this.getCacheAttName(enFX,fn.uid);
var delegate = this.cache.getCache(el.id,AttName);
if(delegate){
if (el.removeEventListener){//Mozilla系列
el.removeEventListener(enFX, delegate, false);
} else if (el.detachEvent){//非Mozilla系列
el.detachEvent(enIE, delegate);
}
}
//删除事件缓存
this.cache.removeCache(el.id,AttName);
}
}
JCore.apply(JEvents,JEventsExtendMethod);
/*--------------------------------对event的参数包装---------------------------------*/
var JEventWrap = function(event){
this.xtype="EventWrap";
this.data=null;
this.srcElement = null; //发生事件的文档元素
this.button = null; //[FX:0-左键,1-中间键,2-右键][IE:1-左键,2-右键,4-中键](仅对onmousedown, onmouseup,onmousemove有效)
this.type = null;
this.clientX = 0; //鼠标指针相对客户区或浏览器窗口的X坐标(标准属性)
this.clientY = 0; //鼠标指针相对客户区或浏览器窗口的Y坐标(标准属性)
this.offsetX = 0; //鼠标指针相对于源元素的X坐标(兼容属性)(IE)
this.offsetY = 0; //鼠标指针相对于源元素的Y坐标(兼容属性)(IE)
this.screenX = 0; //鼠标指针相对于用户显示器的左上角X坐标(兼容属性)(FX)
this.screenY = 0; //鼠标指针相对于用户显示器的左上角Y坐标(兼容属性)(FX)
this.altKey = false; //是否Alt键
this.ctrlKey = false; //是否Ctrl键,
this.shitfKey = false; //是否Shift键
this.keyCode = 0;
this.originaEvent = null; //未包装的原始事件对象
/*----构造-----*/
if(event){
if(event.srcElement){//IE
this.srcElement = event.srcElement;
this.offsetX = event.offsetX;
this.offsetY = event.offsetY;
this.button = event.button;
}
else{
this.srcElement = event.target;
this.offsetX = event.clientX - event.target.offsetLeft;
this.offsetY = event.clientY - event.target.offsetTop;
}
this.type = event.type;
this.altKey = event.altKey;
this.ctrlKey = event.ctrlKey;
this.shitfKey = event.shitfKey;
this.clientX = event.clientX;
this.clientY = event.clientY;
this.screenX = event.screenX;
this.screenY = event.screenY;
this.keyCode = event.keyCode;
this.originaEvent = event;
}
}
其中JCore.js文件见上一篇日志:面向对象Javascript核心支持代码
内容总结
以上是互联网集市为您收集整理的Javascript处理DOM元素事件实现代码_javascript技巧全部内容,希望文章能够帮你解决Javascript处理DOM元素事件实现代码_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。