Question

在过去的两天里，我完全陷入了这种特殊情况，阅读了100篇文章但却无法帮助。

我的html页面有许多元素（或将这些元素视为小部件），页面上这些元素的数量是动态的。同样的元素也可以重复（多次）。所以为方便起见，我没有给他们任何身份证明。让我们说这些元素是

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";
        });
    }
}

将事件侦听器附加到DOM而不是污染全局名称空间

1 个答案: