How can I add an event listener for all events in javascript without listing them individually?

javascript addeventlistener
javascript add a click handler
how to create event handler in javascript
event handler vs event listener javascript
addeventlistener events
addeventlistener jquery
javascript capture all events
usecapture

I'd like to accomplish the following code using a wildcard (that I don't think exists?)

myObject.element = document.getElementsByClassName('js-myObject');
myObject.element.addEventListener('click', myObject.click);
myObject.element.addEventListener('mouseover', myObject.mouseover);
//etc..

So far, I have the following

myObject.controller = function(e){
   if( (e.type in myObject) && (typeof myObject[e.type] ==='function') ){
      myObject[e.type](e);
   }
};

//but the listeners still have to be assigned as such
myObject.element = document.getElementsByClassName('js-myObject');
myObject.element.addEventListener('click', myObject.controller);
myObject.element.addEventListener('mouseover', myObject.controller);
//etc...


// but I want to do (and it doesn't work)
myObject.element.addEventListener('*', myObject.controller);

Any suggestions on methods other than an array of events and a foreach statement?

Edit, my current solution

I've accepted an answer below (there's no wildcard available, and it's a bad idea to parse potentially hundreds of events)

For those looking for a similar function, I've settled on the following approach, at least for now.

for(var prop in myObject){
  if (!myObject.hasOwnProperty(prop){continue;}
  if (typeof myObject[prop] !== 'function'){continue;}
  myObject.element.addEventListener(prop, myObject[prop]);
}

The upside is a handler for custom events that I don't have to go back and add listeners for. The downside is that I have to ensure this function is called after every myObject.someEvent() is defined. I call it in myObject.init(); which works for me just fine. Note that this solution wouldn't fit my previous specs, because it uses a for/each loop -- but it accomplishes what i really wanted to accomplish and a big thanks to @torazaburo for clearly defining the technical limitations and lack of wisdom in my initial plan.

// but I want to do (and it doesn't work)
myObject.element.addEventListener('*', myObject.controller);

There is no such feature, and I doubt if you want hundreds of events on an element being listened for anyway.

By the way, instead of your roll-your-own architecture for a generic event handler in the form of your myObject.controller, you should use the under-appreciated approach involving the EventListener interface and the handleEvent method it defines.

JavaScript DOM EventListener, How do I add an event listener to multiple elements? When using the addEventListener () method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup. You can easily remove an event listener by using the removeEventListener () method.

There's no wild card, but using jQuery you can have 1 long event listener line, rather than multiple.

How do you log all events fired by an element in jQuery?

Like so:

('body').on("click mousedown mouseup focus blur keydown change dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom select change submit reset",function(e){
     console.log(e);
}); 

Remove All Event Listeners of Specific Type, Can you handle multiple events on the same HTML element? But the main problem description of this article (inlcuding your title) and your main statement: “It is difficult to listen to all events using a simple global event listener, because of the existence of stopPropagation”, are simply proven wrong or at best simply misleading. This has nothing to do with an opinion, this is a fact.

getElementsByClassName already returns an array, not a single element. Just do it in a loop.

myObject.element = document.getElementsByClassName('js-myObject');
for(var i=0; i<myObject.element.length; i++){
    myObject.element[i].addEventListener('click', myObject.controller);
    myObject.element[i].addEventListener('mouseover', myObject.controller);
}

Edit... after clarification.. loops and arrays are still useful

var e = ['click', 'hover', 'focus', 'mouseover', 'mouseout'];
myObject.element = document.getElementsByClassName('js-myObject');
for(var i=0; i<myObject.element.length; i++){
    for(var n=0; n<e.length; n++)
        myObject.element[i].addEventListener(e[n], myObject.controller);
}

How to handle event handling in JavaScript (examples and all), The following is a guest post by Matthias Christen and Florian Müller from It allows you, for example, to have a link ( <a> ) for which the user does not go to its When an event is triggered on an element, say a link, any event handler that is​  Note: For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the useCapture parameter.

Something like this ?

        document.addEventListener('click', function (event) {

            if (event.target.closest('.scroll')) {
                // Do something...
            }

            if (event.target.matches('[data-some-attribute]')) {
                // Do something else...
            }

            if (event.target.matches('#my-form')) {
                // Do another t hing...
            }

        }, false)

EventTarget.addEventListener(), You have power over your mind—not outside events. The addEventListener method allows you to add any number of handlers so that it is a long list of buttons, it may be more convenient to register a single click handler on out whether a button was clicked, rather than register individual handlers on all of the buttons. Required. Specifies the function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. useCapture: Optional.

JavaScript Event Madness! Capturing *all* events without interference, Without bloating your code, learn how to rely on event propagation to easily If this sounds new to you, take a few moments to read the Events in JavaScript tutorial first. These elements you are creating can fire events that you may want to You don't want to create an event listener for each element. The main advantages of the third mechanism are that you can remove event handler code if needed, using removeEventListener (), and you can add multiple listeners of the same type to elements if required. For example, you can call addEventListener ('click', function () {

Handling Events :: Eloquent JavaScript, I've tried with vanilla JS and jQuery and haven't been able to figure it out. Would be very appreciative of any help. Thanks. // each individual li (class is matches) const matches = document. https://learn.jquery.com/events/event-​delegation/ I totaly forgot that I am adding event listener when dynamicly adding new list  A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick= JavaScript

Handling Events for Many Elements, All DOM nodes generate such signals (but events are not limited to DOM). Here's a list of the most useful DOM events, just to take a look at: A handler can be set in HTML with an attribute named on<event> . When the browser reads the attribute, it creates a handler function with body from its content:  If you click the save button, your code will be saved, and you get an URL you can share with others. Save Cancel By clicking the "Save" button you agree to our terms and conditions .

Comments
  • put your objects in an array and set the handler in a loop
  • or use jquery, which does this
  • stackoverflow.com/questions/7439570/…
  • @Pamblam please understand that I'm looking for a way to avoid listing every EVENT.
  • I strongly doubt you want to add a listener for all events. What's wrong with ['click', 'mouseover'].forEach(evt => myObject.element.addEventListener(evt, myObject.controller));?
  • @torazabura -- thanks. This is being accepted as the answer because while the other ones tried to solve it, they didn't meet my criteria. 1. no foreach, 2. all events
  • This does not work in chrome. I tried it using document.body.addEventListener('*', function(e) { console.log('event', e); }); it didn't work in chrome or firefox. What did work was individual events. What did not work was multiple events.
  • @MrMesees If you read the entire comment, you'll notice that the code above was actually user663031 quoting the OP.
  • Then they should use a mechanism to show that such as blockquote and cite
  • That's a great resource -- thanks mmcrae, but still not what I want. i.e., it doesn't handle custom events. I'm wondering if javascript doesn't allow for what I'm looking for. (Also, i'd rather not require jquery if it's not a full solution)