Question

所以，我已经有相当长的好奇心了。我想知道addEventListener在幕后的运作方式。我知道它的作用，但是我只是无法理解它的作用。

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

。

要弄清我真正要查找的内容，我想知道一个人如何创建自己的addEventListener函数，该函数将第一个参数用作事件名称，将第二个参数用作将接受参数的回调eventArgs参数。

Answer 1

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

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' }

Answer 2

据我所知，JS具有一种 Observer ，它是GoF（四人帮）的设计模式，您可以阅读更多here。 观察者将继续等待状态更改，然后在更改状态时，将称为通知所有对象的回调。 UML波纹管将为您提供它的工作原理。

所以我确实认为JS可以那样工作，但是不是所有对象都一样，每个对象都会有一个自定义回调或多个回调，我不太确定，但应该这样。我没有在网上找到任何东西，但是这个Reddit topic在谈论它

Answer 3

addEventLisner将句柄与html DOM节点绑定。它带有要附加的事件和一个回调函数。

Answer 4

如果您要将自定义事件添加到DOM，我认为这是不可能的。至少我不知道有任何规范可以支持这一点。有一个自定义元素规范，可让您创建自己的web components。这样，您可以检查可能触发的事件。但是，您可以在DOM之外执行相同的概念：

var callbacks = [];
function addToEventListener(callback) {
    callbacks.push(callback);
}

function triggerMyEvent(payload) {
    callbacks.forEach(function(cb){
        cb(payload);
    });
}

addToEventListener(function(p){
    console.log(p);
});

triggerMyEvent({testValue:true});

注意：上面使用全局变量，这不是一个好习惯。我建议不要这样做，但是为了简短起见，我选择使用全局变量。想法是一样的。

“ addEventListener”如何在后台工作？

4 个答案: