title: How to listen for event on other element
body: <p>(I asked similiar question yesterday but it went in another direction so posting again with more details)</p>
  
  <p>I have a class/object that takes an ID of a html element, and then sets event handlers on said element.</p>
  
  <pre><code>like: batman.on("click",run_this_code());
  </code></pre>
  
  <p>The result of that is obviously to run the func/code when the elements click event is fired.</p>
  
  <p>Now, my question is: How can I listen/watch for OTHER elements events?
  say batman is a &lt;button id="batman"&gt; and superman is a textfield &lt;input type="text" id="superman"&gt;
  And I have an instance of my class as described above, for the button "batman".
  How would I in that instance, listen for events on "superman".
  pseudo code:</p>
  
  <pre><code>batman.listen("click","fired on element with ID superman",run_this_code());
  </code></pre>
  
  <p>The only thing I have come up with, which I dont know 100% how to do is to register all clicks on the document, with:</p>
  
  <pre><code>var arr;
  document.addEventListener('click', function (event) {
      if (!event.target.hasAttribute('track_me')) return;
      // code here that saves the click, and the ID, into an array (arr)
  }, false);
  </code></pre>
  
  <p>and now other instances can somehow check for changes on the array (arr), and react accordingly.</p>
  
  <p>Ok enough rambling, basically how can i do:</p>
  
  <pre><code>batman.listen("click","on_superman",function(){
      alert("this instance represents the 'batman' element, but the element 'superman' was just clicked.");
  }
  );
  </code></pre>
  
  <p>I do NOT want to write the code in the "superman" instance. That is just an example, I want to to be a universal function for my class, to listen for events on other instances.</p>