javascript - 'addEventListener`在幕后如何工作？

Closed. This question needs to be more focused。它当前不接受答案。












想要改善这个问题吗？更新问题，使它仅关注editing this post的一个问题。

1年前关闭。



Improve this question




所以，我已经有很长一段时间的好奇心了。我想知道addEventListener在幕后如何工作。我知道它的作用，但是我只是无法理解它的作用。

我检查了许多链接和资源，而this是最接近我所寻找的链接，但仍然没有成功。

为了澄清我真正想要的是什么，我想知道如何创建自己的addEventListener函数，该函数将第一个参数用作事件名称，将第二个参数用作接受eventArgs参数的回调。

最佳答案

这将是事件分发系统的简单示例

class BusEvent {
    eventName = null;
    callbacks = [];

    constructor(eventName) {
        this.eventName = eventName;
    }

    register(callback) {
        this.callbacks.push(callback);
    }

    unregister(callback) {
        const index = this.callbacks.indexOf(callback);
        if (index > -1) {
            this.callbacks.splice(index, 1);
        }
    }

    execute(data) {
        const callbacks = this.callbacks.slice(0);
        callbacks.forEach((callback) => {
            callback(data);
        });
    }
}

class MessageBus {
    constructor() {
        this.events = {};
    }

    dispatch(eventName, data) {
        const event = this.events[eventName];
        if (event) {
            event.execute(data);
        }
    }

    on(eventName, callback) {
        let event = this.events[eventName];
        if (!event) {
            event = new BusEvent(eventName);
            this.events[eventName] = event;
        }
        event.register(callback);
    }

    off(eventName, callback) {
        const event = this.events[eventName];
        if (event && event.callbacks.indexOf(callback) > -1) {
            event.unregister(callback);
            if (event.callbacks.length === 0) {
                delete this.events[eventName];
            }
        }
    }
}

用法:

const messageBus = new MessageBus();
messageBus.on('ReceiveData', (data) => {
    console.log(data);
})

messageBus.dispatch('ReceiveData', { name: 'Ted' });
// console logs { name: 'Ted' }

关于javascript - 'addEventListener`在幕后如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57657372/