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

admin管理员组

文章数量:1291179

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 acplish this task? How this task is named in literature? Is there a methods for this in jQuery?

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 acplish this task? How this task is named in literature? Is there a methods for this in jQuery?

• javascript
• jquery
• function
• extending

Share Improve this question Follow asked Feb 9, 2012 at 14:55 DimsDims 51.2k130130 gold badges358358 silver badges651651 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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

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

Subsequent calls won't remove previously-bound handlers.

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

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

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 acplish this in native JavaScript, you need to use string concatenation:

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

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 javascriptStack Overflow