js实现event函数
实现自定义事件函数
在JavaScript中实现自定义事件函数可以通过多种方式完成，包括使用原生Event API、自定义事件类或观察者模式。以下是几种常见实现方法：
使用EventTarget原生API
现代浏览器支持内置的EventTarget接口，可直接用于事件监听和派发：
// 创建事件目标对象
const eventTarget = new EventTarget();
// 添加事件监听
eventTarget.addEventListener('customEvent', (e) => {
console.log('事件触发:', e.detail);
});
// 派发自定义事件
const event = new CustomEvent('customEvent', {
detail: { message: 'Hello World' }
});
eventTarget.dispatchEvent(event);实现简单的事件总线
创建一个事件总线类管理多个事件监听器：
class EventBus {
constructor() {
this.listeners = {};
}
on(event, callback) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(callback);
}
off(event, callback) {
if (!this.listeners[event]) return;
this.listeners[event] = this.listeners[event].filter(
listener => listener !== callback
);
}
emit(event, ...args) {
if (!this.listeners[event]) return;
this.listeners[event].forEach(callback => {
callback(...args);
});
}
}
// 使用示例
const bus = new EventBus();
bus.on('log', message => console.log(message));
bus.emit('log', 'Event triggered');使用观察者模式实现
观察者模式提供更灵活的事件管理方式：
class Observable {
constructor() {
this.observers = [];
}
subscribe(fn) {
this.observers.push(fn);
}
unsubscribe(fn) {
this.observers = this.observers.filter(subscriber => subscriber !== fn);
}
notify(data) {
this.observers.forEach(observer => observer(data));
}
}
// 使用示例
const observable = new Observable();
const logger = data => console.log('Received:', data);
observable.subscribe(logger);
observable.notify({ value: 42 });支持一次性事件监听
扩展事件总线支持一次性事件监听：
class AdvancedEventEmitter {
constructor() {
this.events = {};
}
on(event, listener) {
(this.events[event] || (this.events[event] = [])).push(listener);
}
once(event, listener) {
const onceWrapper = (...args) => {
listener(...args);
this.off(event, onceWrapper);
};
this.on(event, onceWrapper);
}
off(event, listener) {
if (!this.events[event]) return;
this.events[event] = this.events[event].filter(l => l !== listener);
}
emit(event, ...args) {
(this.events[event] || []).forEach(listener => listener(...args));
}
}在DOM元素上使用自定义事件
DOM元素也支持自定义事件派发：
const element = document.getElementById('myElement');
element.addEventListener('build', (e) => {
console.log(e.detail.time);
});
const event = new CustomEvent('build', {
detail: { time: Date.now() }
});
element.dispatchEvent(event);以上实现方式可根据具体需求选择，原生EventTarget适合简单场景，自定义事件类提供更多控制，观察者模式适合复杂事件系统。
