实现一个事件监听器Event 类,支持下列方法 addEventlistener(eventName: string,listener: function) :监听事件,当事件触发时执行回调函数 removeEventlistener (eventName: string,listener: function):移除监听事件 addEventlistenerOnce(eventName: string,listener: function):监听事件,当事件触发时执行回调函数并只执行一次回调函数 removeAll(eventName:string) 移除监听事件的所有回调函数 emit(eventName) 触发事件,执行回调函数 其中参数eventName为事件名,listener为事件触发后执行的回调函数 系统将自动执行你实现的Event类中的函数,校验是否实现以上功能 class Event{ constructor() { } addEventListener(eventName,listener){ } removeEventListener(eventName,listener){ } addEventListenerOnce(eventName,listener){ } removeAll(eventName){ } emit(eventName){ } }
时间: 2024-04-17 18:25:26 浏览: 46
addEventListener()和removeEventListener()追加事件和删除追加事件
下面是一个实现了事件监听器功能的Event类:
```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 = (...args) => {
listener(...args);
this.removeEventListener(eventName, onceListener);
};
this.addEventListener(eventName, onceListener);
}
removeAll(eventName) {
if (this.events[eventName]) {
delete this.events[eventName];
}
}
emit(eventName, ...args) {
if (this.events[eventName]) {
this.events[eventName].forEach(listener => {
listener(...args);
});
}
}
}
```
在这个实现中,Event类使用一个`events`对象来存储事件和相应的监听器数组。`addEventListener`方法将一个监听器添加到特定事件的监听器数组中。`removeEventListener`方法从特定事件的监听器数组中移除一个监听器。`addEventListenerOnce`方法是`addEventListener`的变体,它添加一个只执行一次的监听器,当监听器被触发后,它将自动从事件的监听器数组中移除。`removeAll`方法移除特定事件的所有监听器。`emit`方法用于触发特定事件,它会依次执行事件的监听器数组中的所有监听器,并传递参数。
您可以使用以下方式测试Event类的功能:
```javascript
const event = new Event();
const callback1 = () => console.log('Listener 1');
const callback2 = () => console.log('Listener 2');
event.addEventListener('click', callback1);
event.addEventListener('click', callback2);
event.emit('click'); // 输出 "Listener 1" 和 "Listener 2"
event.removeEventListener('click', callback1);
event.emit('click'); // 只输出 "Listener 2"
event.addEventListenerOnce('hover', () => console.log('Hovering...'));
event.emit('hover'); // 输出 "Hovering..."
event.emit('hover'); // 不输出任何内容
event.removeAll('click');
event.emit('click'); // 不输出任何内容
```
上述代码演示了如何使用Event类来添加、移除、触发事件以及监听器。
阅读全文