How to listen for event on other element

Question

(I asked similiar question yesterday but it went in another direction so posting again with more details)

I have a class/object that takes an ID of a html element, and then sets event handlers on said element.

like: batman.on("click",run_this_code());

The result of that is obviously to run the func/code when the elements click event is fired.

Now, my question is: How can I listen/watch for OTHER elements events? say batman is a <button id="batman"> and superman is a textfield <input type="text" id="superman"> 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:

batman.listen("click","fired on element with ID superman",run_this_code());

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:

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

and now other instances can somehow check for changes on the array (arr), and react accordingly.

Ok enough rambling, basically how can i do:

batman.listen("click","on_superman",function(){
    alert("this instance represents the 'batman' element, but the element 'superman' was just clicked.");
}
);

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.

Answer 1

say batman is a <button id="batman"> and superman is a textfield <input type="text" id="superman"> 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"

You can get a reference to the superman element like this:

document.getElementById("superman")

or if you're using jQuery, as you seem to be, you can get a jQuery object containing that element like this:

$("#superman")

Then use addEventListener (on the element) or on (on the jQuery object) to listen for the click event.

document.getElementById("superman").addEventListener("click", function() {
    // superman clicked
});

or

$("#superman").on("click", function() {
    // superman clicked
});

The code doing that can be in any class or object method you want.

---

In a comment you've said:

my goal is to have a function to react to any other elements events

You may be looking for event delegation: Most events bubble, and so you can put an event listener on some container (document itself if you want) and watch for the events to happen. The element that triggered the event is available as the target property of the event object your handler receives:

document.addEventListener("click", function(e) {
    // Use `e.target` here...
});

Example:

document.addEventListener("click", function(e) {
  console.log(e.target.id + " click");
});
document.addEventListener("input", function(e) {
  console.log(e.target.id + " input: " + e.target.value);
});

<div>
  <input id="one" type="text">
</div>
<div>
  <input id="two" type="text">
</div>