如何在JavaScript中使用自定义事件
2016-01-16 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
展开全部
在javascript中实现自定义事件的原理是创建一个管理事件的对象.如下代码是事件的定义:
function EventTarget(){
this.handlers = {};//存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组
}
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);
}
}
};
首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,
然后有三个操作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.
addHander是向handlers中添加事件处理程序
fire是触发handlers中的事件处理程序
removeHandler是向handlers中移除事件处理程序
注:事件处理程序通俗的讲就是事件被触发时需要执行的方法.
function EventTarget(){
this.handlers = {};//存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组
}
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);
}
}
};
首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,
然后有三个操作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.
addHander是向handlers中添加事件处理程序
fire是触发handlers中的事件处理程序
removeHandler是向handlers中移除事件处理程序
注:事件处理程序通俗的讲就是事件被触发时需要执行的方法.
展开全部
在javascript中 ,document.createEvent()的函数来专门创建自定义事件。
自定义事件到激发这个事件,需要document.createEvent(),event.initEvent(),element.dispatchEvent()这三步,分别是创建事件对象,初始化事件对象,触发事件。
给你个简单例子:
function foo1(){
console.log("foo1 is execute");
}
function foo2(){
console.log("foo2 is execute");
}
var ev=document.createEvent('HTMLEvents');
ev.initEvent('fakeEvent',false,false);
document.addEventListener("fakeEvent",foo1,false);
document.addEventListener("fakeEvent",foo2,false);
自定义事件到激发这个事件,需要document.createEvent(),event.initEvent(),element.dispatchEvent()这三步,分别是创建事件对象,初始化事件对象,触发事件。
给你个简单例子:
function foo1(){
console.log("foo1 is execute");
}
function foo2(){
console.log("foo2 is execute");
}
var ev=document.createEvent('HTMLEvents');
ev.initEvent('fakeEvent',false,false);
document.addEventListener("fakeEvent",foo1,false);
document.addEventListener("fakeEvent",foo2,false);
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询