Is it posible to implement 2 functions for the same event handler in Javascript?

Question

I am quite new to Javascript or JQuery. I have a quite complete HTML resource, in which a button element has a function X1 to handle its click event.

Now, I don't want to modify any thing from the existing HTML resource, but want to add my function X2 when the user clicks on the button. My purpose is after functionX1 is implemented, my functionX2 will be implemented.

I wrote functionX2 in a separate javascript file, and include in the index.html.

Is it posible?

-------------------------------- EDIT ---------------------------------

The existing html resource looks like follow:

"libs.js" that contains functionX1 to handle the click event:

$('#button').on('click', function() {
   //-do X1 here
   ....

}

"index.html" that contains a button

head

script src="libs.js"

/head

body

div id="button"

/body

Now, I don't want to modify anything from "libs.js", I write a separate javascript file "mylibs.js", in which create another function to handle the button's click event.

$('#button').on('click', function() {
   //-do X2 here
   ....

}

In the index.html, I include my js file

head

script src="libs.js"
script src="mylibs.js"

/head

body

div id="button"

/body

So does it serve my purpose: do X1 and then do X2 when the button is clicked?

If I include as above, when the button gets clicked, one of the following cases will happen?

X1 will be implemented, X2 is ignored.
X1 will be ignored, X2 will be implemented.
X1 will be implemented, and the X2 will be implemented.

wait? but this is already supported by default, doesn't it? as far as I remember on() uses addEventListener()/attachEvent() which allow multiple handlers for the same event — user2844991
– user2844991, Commented Apr 13, 2015 at 9:56
@Stefan, you're absolutely right. Sometimes the obvious isn't that obvious :-) I'll edit my answer. — Michel
– Michel, Commented Apr 13, 2015 at 10:12

Rory McCrossan · Accepted Answer · 2015-04-13 09:00:58Z

6

This is easily possible. Dependent on how the code is structured you would just need to place the call to your functionX2 after the call to functionX1 in the anonymous handler:

$('#foo').click(function() {
    functionX1();
    functionX2();
});

Alternatively, you can call functionX2() at the end of functionX1():

var functionX1 = function() {
    // your logic...

   functionX2();
}

answered Apr 13, 2015 at 9:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

chipbk10 Over a year ago

The thing is I don't want to modify any existing javascript library. I write my own javascript, and include in html file. If you understand what I mean. Probably, I need to update my post.

Rory McCrossan Over a year ago

Then you would probably have to use some hacky method of forcing the order of assigned events. Why can you not modify the existing code?

chipbk10 Over a year ago

It's a third party library, can be updated when necessary. So that's why I don't want to modify anything from this js file.

Rory McCrossan Over a year ago

Does it have any callback parameters you can use to hook to?

chipbk10 Over a year ago

No, they don't have any callback parameters I can use to hook to. They don't know that I need to implement additional thing.

user2844991 · Accepted Answer · 2015-04-13 10:01:46Z

3

$("#my-btn").on("click", function () { alert(1); });
$("#my-btn").on("click", function () { alert(2); });

This is already supported in jQuery.

answered Apr 13, 2015 at 10:01

user2844991

2 Comments

chipbk10 Over a year ago

So with this code, alert(1) and alert(2) will be implemented in order? Thanks Stefan.

user2844991 Over a year ago

"Event handlers bound to an element are called in the same order that they were bound" (jQuery docs), so as long as you attach your handler after your library does, it should work fine.

Michel · Accepted Answer · 2015-04-13 10:18:35Z

1

[edit] As Stefan correctly stated: jQuery can handle multiple eventhandlers and fires them in the order they are bound.

So just add

$('#foo').click(function () {
   X2();
});

after the original handler was attached, and you'll be ok.

Fiddle

[I'll leave this for future reference, but it's obsolete]

There is an option, but it is hack, prone to errors and I would recommend Rory's first solution, but here we go:

//the original click
$('#foo').click(function () {
   X1();
});

//add an additional MOUSEUP listener
//note that mouseup fires before click, so there has to be a timeout
$('#foo').mouseup(function () {
    setTimeout(function () {
        X2()
    }, 200);
});

function X1() {
    //run X1
}

function X2() {
   //run X2
}

Here is a fiddle

edited Apr 13, 2015 at 10:18

answered Apr 13, 2015 at 9:47

Michel

4,1554 gold badges39 silver badges57 bronze badges

Collectives™ on Stack Overflow

Is it posible to implement 2 functions for the same event handler in Javascript?

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related