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

Related searches

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?

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

.trigger(), Description: Attach an event handler function for one or more events to the selected elements. browser's standard JavaScript event types, calling the handler function when In the second form of .on() , the events argument is a plain object. The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object.

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

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

Subsequent calls won't remove previously-bound handlers.

Attach an event handler function, Description: Attach a handler to an event for the elements. but may be triggered manually from other JavaScript code using .trigger() or . After all handlers have executed, the event continues along the normal event propagation path. The on () method attaches one or more event handlers for the selected elements and child elements. As of jQuery version 1.7, the on () method is the new replacement for the bind (), live () and delegate () methods. This method brings a lot of consistency to the API, and we recommend that you use this method, as it simplifies the jQuery code base.

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

.bind(), Description: Attach an event handler for all elements which match the current A plain object of one or more JavaScript event types and functions to execute for´┐Ż Attaches two event handlers to the hover event: keydown() Attaches/Triggers the keydown event: keypress() Attaches/Triggers the keypress event: keyup() Attaches/Triggers the keyup event: live() Removed in version 1.9. Adds one or more event handlers to current, or future, selected elements: load() Removed in version 3.0. Attaches an event

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

.live(), Description: Attach a handler to one or more events for all elements that match A string containing one or more space-separated JavaScript event types, such as A plain object of one or more event types and functions to execute for them. Although .on() isn't the only method provided for event binding, it is a best practice to use this for jQuery 1.7+. To learn more, read more about the evolution of event binding in jQuery. The .on() method provides several useful features: Bind any event triggered on the selected elements to an event handler; Bind multiple events to one event

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>

.delegate(), The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target. The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target. Skip to main content.

This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. For example, consider the HTML:

Javascript Inline event calendar demo with input for manually adding events. See data loading live in calendar. Plain JS api for usage everywhere.

Comments
  • Is this applicable to any javascript object of only for jquery sets?
  • @Dims: see mrspeaker.net/2009/10/28/using-jquery-on-javascript-objects.
  • Note that the jQuery on method requires jQuery 1.7+
  • Wow! Isn't this slower than hardcoding?
  • 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.