グローバルな名前空間を汚染するのではなく、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"; 
     }); 
    } 
}