首页 / JAVA / Javascript自定义事件
Javascript自定义事件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript自定义事件,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2068字,纯文字阅读大概需要3分钟。
内容图文
事件是与DOM交互的最常见的方式,但它也可以用于非DOM代码中--通过实现自定义事件.
实现自定义事件的原理是创建一个管理事件的对象 .
第一步:创建事件对象
function EventTarget(){
this.handlers = {};//存储结构:{事件名1:[func1,func2……],事件名2:[func1,func2……]……}
}
EventTarget.prototype = {
constructor:EventTarget,
//添加事件
addHandler:function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
//触发事件
fire:function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length;i < len;i++){
//将event传递给事件处理程序,event.target代表对象本身,
event.type代表事件名,你可以根据情况为添加event属性
handlers[i](event);
}
}
},
//移除事件
removeHandler:function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers=this.handlers[type];
for(var i=0,len=handlers.length;i < len; i++){
if(handlers[i] == handler){
break;
}
}
handlers.splice(i,1);
}
}
};
第二步:事件调用
var eventObj=new (); //实例化一个EventTarget类型 var handler=function(){ alert(‘event‘); }; //事件处理程序 eventObj.addHandler(‘alert‘,handler); //为eventObj对象添加一个事件处理程序`handler` event.fire({type:‘alert‘}); //触发eventObj对象中的事件处理程序`handler` event.removeHandler(‘alert‘,handler); //删除eventObj对象中的事件处理程序`handler`
扩展:(事件继承)
我们可以让其他类型继承EventTarget
的属性和方法
定义继承方法
//原型式继承
var object=function(o){//F起到中转作用,避免参入多余属性
function F(){}
F.prototype=o;
return new F();
};
//subType继承superType的原型对象
var inheritPrototype=function(subType,superType){
var prototype=object(superType.prototype);
prototype.constructor=subType;
subType.prototype=prototype;
}
//实现继承并扩展属性
function Person(name,age){
EventTarget.call(this);//继承EventTarget的属性
this.name = name;
this.age = age;
}
inheritPrototype(Person,EventTarget);//继承EventTarget的方法
Person.prototype.say=function(message){
this.fire({type:‘message‘,message:message}); //触发事件
};
//调用
//事件处理程序
var handMessage=function(event){
alert(event.target.name + "says:" + event.message);
};
var person=new Person(‘yhlf‘,29);
person.addHandler(‘message‘,handMessage);
person.say(‘Hi there‘);
原文:http://benbird.blog.51cto.com/3148258/1698908
内容总结
以上是互联网集市为您收集整理的Javascript自定义事件全部内容,希望文章能够帮你解决Javascript自定义事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。