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?

score 5 · Answer 1 · answered Feb 09 '12 at 14:58

5

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

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

Subsequent calls won't remove previously-bound handlers.

answered Feb 09 '12 at 14:58

Pointy

405,095
59
585
614

Note that the jQuery on method requires jQuery 1.7+ – Kory Hodgson Feb 09 '12 at 15:21

score 4 · Accepted Answer · answered Feb 09 '12 at 15:03

4

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){ ... });

answered Feb 09 '12 at 15:03

rsenna

11,775
1
54
60

Is this applicable to any javascript object of only for jquery sets? – Dims Feb 09 '12 at 15:17
@Dims: see http://www.mrspeaker.net/2009/10/28/using-jquery-on-javascript-objects/. – rsenna Feb 09 '12 at 15:32

score 2 · Answer 3 · answered Feb 09 '12 at 14:58

2

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

answered Feb 09 '12 at 14:58

Kory Hodgson

790
1
5
15

score 1 · Answer 4 · answered Feb 09 '12 at 14:59

1

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 };"

answered Feb 09 '12 at 14:59

jbabey

45,965
12
71
94

Wow! Isn't this slower than hardcoding? – Dims Feb 09 '12 at 15:18
I am not sure what you mean by hardcoding... string concatenating event handlers is, of course, not the desired solution - attaching the handlers through jQuery would be preferable. – jbabey Feb 09 '12 at 15:31

score 0 · Answer 5 · answered May 02 '19 at 10:11

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.

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

5 Answers5