전역 네임 스페이스를 오염시키는 대신 DOM에 이벤트 리스너 부착

Question

지난 2 일 동안이 특정 상황에 완전히 빠졌으며 기사 100 개를 읽었지만 도움이되지 않았습니다.

내 html 페이지에는 많은 요소가 있고 (또는 이러한 요소를 위젯으로 생각할 수 있습니다.) 페이지의 이러한 요소 수는 동적입니다. 동일한 요소가 반복 될 수도 있습니다 (여러 번 반복). 그래서 편의를 위해 나는 그들에게 어떤 이드도주지 않았다. 이러한 요소

을 말할 수 A1 A2 B1 B2 B3 . . .

이제 이벤트가 페이지에서 계속 발생합니다. 그리고 내가 원한 것은 이러한 각 요소가 여러 이벤트에 가입 할 수 있어야하고, 지금까지 일어난 모든 변경 사항을 기록하고 해당 이벤트에 따라 특정 방식으로 변경 될 수 있어야한다는 것입니다.

이벤트 lionAttacked가 발생하고 B3가이 이벤트에 가입했다는 것을 알려줍니다. B3의 일부 ID가 있었다 이제 있다면, 내 코드가

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

것 할, 332,124 말할 수 있습니다하지만 너무 이상적 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"; 
     }); 
    } 
}