javascript - 将事件监听器附加到 DOM，而不是污染全局命名空间

Question

过去 2 天我完全陷入这种特殊情况，阅读了 100 篇文章，但无能为力。

我的 html 页面有许多元素(或将这些元素视为小部件)，并且页面上这些元素的数量是动态的。相同的元素也可以重复(多次)。所以为了方便我没有给他们任何ID。假设这些元素是

A1 A2 B1 B2 B3 。 。 .

现在页面上不断发生事件。我想要的是，每个元素都应该能够订阅多个事件，保留迄今为止发生的所有更改的日志，并根据该事件以特定的方式更改自身。

假设引发了一个事件 lionAttacked，并且 B3 已订阅该事件。现在，如果 B3 有某个 id，比如说 332124，那么我的代码将是

    document.addEventListener("lionAttacked", function(e){
            document.getElementById('332124').innerHTML = 
                document.getElementById('332124').innerHTML + "Lion attacked us;"; 
    });

但是由于没有 B3 的 id，所以理想情况下我想要的是如下内容

<div onload="
            document.addEventListener('lionAttacked', function(e){
            /*do whatever you want to do with your element when lion attacks*/
            this.innerHTML = this.innerHTML + 'Lion attacked us;';});

             document.addEventListener('wolfArrived', function(e){
            /*do whatever you want to do with your element when wolf arrives*/
            this.innerHTML = this.innerHTML + 'Wolf came to visit us;';});

            "> 
    my element 
</div>

对我来说，这将是一种更加封装的代码，即与元素相关的所有逻辑都驻留在其中。

非常感谢任何帮助!!

Answer 1

您可以使用包含所有事件订阅的对象。键是事件名称，值是所有已订阅元素的数组。

var subscriptions = {};

function subscribe(event, element) {
    if (!subscriptions[event]) {
        subscriptions[event] = [];
    }
    subscriptions[event].push(element);
}

然后事件监听器的代码将循环遍历数组中的所有元素。

document.addEventListener("lionAttacked", function(e) {
    if (subscriptions[event]) {
        subscriptions[event].forEach(function (el) {
            el.innerHTML += "Lion attacked us";
        });
    }
}