除了传统的一些事件外,有时候因为额外的需求需要创建自定义事件,这里介绍两种。
DOM对象的自定义事件
首先创建事件
event = new Event(typeArg, eventInit);
typeArg是事件名称;
eventInit是事件参数(可选),参数包括bubbles(是否冒泡),cancelable(是否可取消),scoped, composed。都为布尔型。(后两个参数还不知道怎么使用,暂时留个坑。)
然后通过addEventListener注册事件监听。
最后通过dispatchEvent方法触发事件。
代码如下
var ev = new Event("look", {"bubbles":true, "cancelable":true});
document.addEventListener('look',function(e){
console.log(e);
})
document.dispatchEvent(ev);
此处创建了名为look的事件,然后在document对象上设置监听,最后触发look事件。在输出的打印语句中可以看到e的type为“look”。
如果要触发原生的touchstart事件,将以上代码中的 ‘look’ 用 ‘touchstart’ 替换即可。
还有个CustomEvent()的构造方法
之前是使用createEvent和initEvent方法的,但是initEvent已经被Deprecated了,建议使用Event构造方法,这里还是贴下使用方法
// Create the event.
var event = document.createEvent('Event');
// Define that the event name is 'build'.
event.initEvent('build', true, true);
// Listen for the event.
elem.addEventListener('build', function (e) {
// e.target matches elem
}, false);
// target can be any Element or other EventTarget.
elem.dispatchEvent(event);
普通对象的自定义事件(此处参考了backbone框架0.0.1版本的事件部分)
使用发布/订阅模式,在对象上创建_events用来存储订阅的事件对象,_events的每一个属性key为订阅的事件名称,value为该事件名称下的事件列表。
代码如下
var events ={};
//订阅事件
events.on=function(event,callback,context){
this._events = this._events ||{};
this._events[event]=this._events[event]||[];
this._events[event].push(callback);
return this;
}
//发布事件
events.trigger = function(event,args){
if(!this._events||!this._events[event]){
return this;
}
var once = [];
for(var i=0,l=this._events[event].length;i<l;i++){
this._events[event][i].apply(this,args);
if(this._events[event][i].once){
once.push(this._events[event][i]);
}
}
if(once.length){
for(var i=0,l=once.length;i<l;i++){
this.off(event,once[i]);
}
}
return this;
}
//取消订阅事件
events.off = function(event,callback){
if(!this._events||!this._events[event]){
return this;
}
for(var i=0,l=this._events[event].length;i<l;i++){
if(this._events[event][i]===callback){
this._events[event].splice(i,1);
return this;
}
}
return this;
}
//只订阅一次事件
events.once = function(event,callback,context){
this._events = this._events ||{};
this._events[event]=this._events[event]||[];
callback.once = true;
this._events[event].push(callback);
return this;
}