手写EventBus
class EventBus {
constructor() {
this._events = [];
}
on(event, fn) {
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.on(event[i], fn)
}
} else {
(this._events[event] || (this._events[event] = [])).push(fn)
}
}
once(event, fn) {
let _self=this;
function handler() {
_self.off(event, handler);
fn.apply(null,arguments);
}
handler.fn = fn;
this.on(event, handler);
}
off(event, fn) {
if (!arguments.length) {
this._events = [];
}
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.off(event[i], fn)
}
}
const cbs = this._events[event];
if (!cbs) {
return;
}
if (arguments.length == 1) {
this._events[event] = null
}
let cb, i = cbs.length
while (i--) {
cb = cbs[i]
if (cb === fn || cb.fn === fn) {
cbs.splice(i, 1)
break
}
}
}
emit(event) {
let cbs = [...this._events[event]];
if (cbs) {
for (let i = 0, l = cbs.length; i < l; i++) {
try {
cbs[i].apply(null,[...arguments].slice(1))
} catch (e) {
new Error(e, `event handler for "${event}"`)
}
}
}
}
}
let eb=new EventBus();
eb.once('event1',params=>console.log(11,params));
eb.on('event1',params=>console.log(22,params));
eb.emit('event1',33)
利用window.addEventListener自定义事件
var myEvent = new CustomEvent('event_name', {
detail:{
data:"携带数据"
},
bubbles: true,
cancelable: false
});
window.addEventListener('event_name', function(event){
console.log('携带数据为:', event.detail);
});
function dispatchEvent(){
if(window.dispatchEvent) {
dispatchEvent=function(){
window.dispatchEvent(myEvent);
}
} else {
dispatchEvent=function(){
window.fireEvent(myEvent);
}
}
}
jquery自定义事件
$( "p" ).on( "myEvent", function( event, param ) {
console.log(param);
});
$( "p" ).trigger( "myEvent", [ "123" ] );