How to add additional event handler in jQuery or plain javascript?

Question

I have my own object with onShow() function, which is called (by me) when object is shown. I can override this function by assignment

o.onShow = function() { // something };

But it removes previous version of a function. So, if I wish to conserve existing handler, I should cache it and call in new handler:

o.oldOnShow = o.onShow;
o.onShow = function() { this.oldOnShow(); // something };

But this way I can cache only one previous handler. What if there are many of them?

Is there a convenient way to accomplish this task? How this task is named in literature? Is there a methods for this in jQuery?

Answer 1

In jQuery you can add as many handlers as you like:

$(o).on('show', function() { ... });

Subsequent calls won't remove previously-bound handlers.

Answer 2

If you need to trigger a custom event (as in defined by you), you should call the .trigger() method (whenever you feel that event should be triggered):

$(o).trigger('my-awesome-event');

Then you define one or more listeners, using either .bind() or (if you're using jQuery 1.7+) .on() :

$(o).on('my-awesome-event', function(event){ ... });

Answer 3

You can use jQuery's bind method:

$( o ).bind( "show", function() {} );

This adds an event handler to a list of event handlers, doesn't overwrite existing handlers. Here are the docs

Answer 4

Attaching an event handler via jQuery will not conflict with any other events, so long as the event handler does not stop the event from propagating.

If you'd rather accomplish this in native JavaScript, you need to use string concatenation:

o.onShow = o.onShow + "function() { // something };"

Answer 5

If you're looking to do this with vanilla js, it's slightly more tricky.

 const justLog = x => () => console.log(x) const test = justLog('test called') const testTwo = justLog('testTwo called') document.querySelector('button').onclick = testTwo; 

 <button onclick="test">Test</button> 

The problem with this of course is that this simply changes the listener, and doesn't append it.

We can, however, append a new listener with a slight alteration to the code:

 const justLog = x => () => console.log(x) const test = justLog('test called') const testTwo = justLog('testTwo called') const appendOnClick = element => newFunction => { const original = element.onclick; element.onclick = (e) => { original(e) newFunction(e) }; }; const button = document.querySelector('button') const appendNewFunction = appendOnClick(button) appendNewFunction(testTwo) const testThree = justLog('testThree called') appendNewFunction(testThree) appendNewFunction(test) 

 <button onclick="test()">Test</button> 

In this way, we're able to append multiple functions to an element without overriding the functions which were previously in place.