Same signature event handlers in Javascript/JQuery

Question

Could anyone explain what are the results of defining event handlers with same signature e.g.:

// event handler 1
$('form.custom select[data-customforms!=disabled]').on('change', function() { 
    console.log('1');
});

// event handler 2
$('form.custom select[data-customforms!=disabled]').on('change', function() { 
    console.log('2');
});

Is it a bad practice? What is the order of execution? Is there any browser specific behavior related to this? Could event handlers in Javascript be extended?

[check this post](http://stackoverflow.com/questions/12825249/jquery-is-it-illegal-or-bad-practice-to-assign-multiple-event-handlers) — Kinjal, Feb 06 '13 at 07:40

score 1 · Answer 1 · answered Feb 06 '13 at 07:13

1

Both handlers will run subsequently. If you name the handlers, rather than making them anonymous, you can destroy them independently (without the need to completely remove all handlers for the 'change' event).

answered Feb 06 '13 at 07:13

Kippie

3,760
3
23
38

Cool! How do I define a name for the handler? – lexeme Feb 06 '13 at 07:17
1

You can check this for event namespacing (I think that's what Kippie meant by saying 'name the handlers') http://api.jquery.com/event.namespace/ – Vishal Feb 06 '13 at 07:24
1

That was indeed what I meant. Thanks for the link. – Kippie Feb 06 '13 at 07:30

Vishal · Accepted Answer · 2013-02-06T07:30:20.363

The result will be that all the attached events will execute in sequence. This is commonly used to execute multiple functions on a particular event.

In the above case, the first 1 will be logged in console, then 2, just the same order they were applied.

The disadvantage will be that when you remove the change event, all the event handlers attached to that event will be removed (in your case, both the handlers with console.log statement)

You can use event namespacing to overcome this.

score 1 · Answer 3 · answered Feb 06 '13 at 07:16

1

JQuery allowing multiple event handler on an element. This means it will not override the older one. I am not sure about the order of execution but it might be random.

answered Feb 06 '13 at 07:16

alok_dida

1,723
2
17
36

score 0 · Answer 4 · answered Feb 06 '13 at 07:16

0

JQuery Use bind for set event that mean add to event not replace event for replace you must first delete Event then set.

answered Feb 06 '13 at 07:16

mohammad mohsenipur

3,218
2
17
22

Same signature event handlers in Javascript/JQuery

4 Answers4