实现一个事件监听器Event 类,支持下列方法 addEventlistener(eventName: string,listener: function) :监听事件,当事件触发时执行回调函数 removeEventlistener (eventName: string,listener: function):移除监听事件 addEventlistenerOnce(eventName: string,listener: function):监听事件,当事件触发时执行回调函数并只执行一次回调函数 removeAll(eventName:string) 移除监听事件的所有回调函数 emit(eventName) 触发事件,执行回调函数 其中参数eventName为事件名,listener为事件触发后执行的回调函数,大致框架如下:class Event{ constructor() { } addEventListener(eventName,listener){ } removeEventListener(eventName,listener){ } addEventListenerOnce(eventName,listener){ } removeAll(eventName){ } emit(eventName){ } }
时间: 2024-04-17 11:25:36 浏览: 146
以下是一个可能的实现:
```javascript
class Event {
constructor() {
this.events = {};
}
addEventListener(eventName, listener) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(listener);
}
removeEventListener(eventName, listener) {
if (this.events[eventName]) {
const index = this.events[eventName].indexOf(listener);
if (index !== -1) {
this.events[eventName].splice(index, 1);
}
}
}
addEventListenerOnce(eventName, listener) {
const onceListener = () => {
this.removeEventListener(eventName, onceListener);
listener();
};
this.addEventListener(eventName, onceListener);
}
removeAll(eventName) {
if (this.events[eventName]) {
delete this.events[eventName];
}
}
emit(eventName) {
if (this.events[eventName]) {
this.events[eventName].forEach((listener) => {
listener();
});
}
}
}
```
使用示例:
```javascript
const event = new Event();
const listener1 = () => {
console.log('Event 1 is triggered');
};
const listener2 = () => {
console.log('Event 2 is triggered');
};
event.addEventListener('event1', listener1);
event.addEventListener('event2', listener2);
event.emit('event1'); // 输出: Event 1 is triggered
event.removeEventListener('event1', listener1);
event.emit('event1'); // 没有输出,listener1 已被移除
event.addEventListenerOnce('event2', () => {
console.log('Event 2 is triggered only once');
});
event.emit('event2'); // 输出: Event 2 is triggered, Event 2 is triggered only once
event.emit('event2'); // 没有输出,listener2 只执行一次
event.removeAll('event2');
event.emit('event2'); // 没有输出,listener2 已被移除
```
在这个实现中,我们使用一个对象`events`来存储不同事件的监听器。`addEventListener`方法用于向特定事件添加监听器,`removeEventListener`方法用于移除特定事件的监听器,`addEventListenerOnce`方法用于添加只执行一次的监听器,`removeAll`方法用于移除特定事件的所有监听器,`emit`方法用于触发事件并执行相应的监听器。
阅读全文