Adding functionality to a pre-defined event in JavaScript

Question

Is there a way in JavaScript that I can override an event, but still call the original event's code? I basically want to add a single line of code to the end. So for example:

Original function

function DropDownList_OnFocus(a, b) {
    // Original Code
}

What I'd need

function DropDownList_OnFocus(a, b) {
    // Original Code
    // New Code        
}

so you want to update an event handler not the event itself? why not simply add another event handler for the same event? — gurvinder372, Jan 29 '16 at 11:44
Hi @gurvinder372, that's correct, however I need to ensure that the additional code is executed after the original event. I think adding another event handler could have unpredictable results in some cases. — Scott Hulme, Jan 29 '16 at 11:50
unless your event handlers have asynch processing, they will be executed in the order of addition to the event http://stackoverflow.com/questions/18821625/how-do-event-handlers-in-javascript-get-processed-by-the-event-loop — gurvinder372, Jan 29 '16 at 11:52

score 0 · Answer 1 · answered Jan 29 '16 at 12:08

0

Event handlers always execute sequentially in the order they were bound.

So You can simply add another event handler for the same event on the same element and put more/remaining code in the second event handler.

answered Jan 29 '16 at 12:08

Mukesh Saini

1,388
1
7
16

score 0 · Answer 2 · answered Jan 29 '16 at 15:21

I've managed to get it working using the following:

var base = DropDownList.OnFocus;
var DropDownOnFocusOverride = (function () {
    return function () {
        base();
        // Additional Code
    }
});

DropDownList.OnFocus = DropDownOnFocusOverride();

Adding functionality to a pre-defined event in JavaScript

2 Answers2