Timeline for Direct vs. Delegated - jQuery .on()
Current License: CC BY-SA 3.0
21 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Sep 11, 2017 at 22:04 | comment | added | Jaime Montoya | @nipponese If you read the following syntax at api.jquery.com/on and the meaning of each parameter, you will find an answer to your question: .on( events [, selector ] [, data ], handler ). As you can see, the first parameter is "events" and the official explanation says that it is of type String and it adds this definition: 'One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".' As N3dst4 said in his comment, ".on() is a general purpose API that can handle any kind of event." The first parameter could be for example: "click submit". | |
| Feb 17, 2017 at 9:30 | comment | added | K7Buoy | @N3dst4 - please right a book answering questions across all topics like this. For those learning, this kind of analogy is fantastic. I applaud this answer and can not thank you enough! | |
| Sep 30, 2015 at 9:37 | history | edited | N3dst4 | CC BY-SA 3.0 |
Keeping the first examples as short and simple as possible, but retaining the point of the previous edit
|
| Sep 29, 2015 at 16:42 | history | edited | Popnoodles | CC BY-SA 3.0 |
added 34 characters in body
|
| Sep 30, 2014 at 9:44 | comment | added | N3dst4 | jQuery uses "event bubbling" (see quirksmode.org/js/events_order.html for details), so handlers are actually triggered child-first. So in a sense, delegated handlers cause more work because the search must go all he way up the tree to find the handler. However: that's actually a pretty quick operation, even with a deep DOM, and the savings you get in terms to not having to create and bind new handlers when your DOM changes outweight the difference. | |
| Sep 30, 2014 at 5:59 | comment | added | Julio Guerra | what about performances? Is the parent DOM depth-first searched every time it is clicked? | |
| Mar 13, 2014 at 14:03 | comment | added | phatskat | Another note to add to the topic of delegation - it's both very useful and very efficient. You'll use up fewer browser resources with delegation vs attaching an event to every matching element. Thought I'd mention it, just in case people needed more reasons to use delegation. | |
| Feb 14, 2014 at 9:45 | comment | added | LeGEC |
@newbie, @N3dst4 : e.target will be the initial target of the click event (can be a child node if span.green has children). From inside the handler, you should use the this reference. See this fiddle.
|
|
| Nov 8, 2013 at 13:20 | comment | added | newbie |
@N3dst4 I see, so there is a .not() function. Thank you for you help.
|
|
| Nov 8, 2013 at 13:06 | comment | added | N3dst4 |
Oh I see. That's almost a separate question, but you could do this: $("div#target span.green").not(event.target).whatever()
|
|
| Nov 8, 2013 at 12:33 | comment | added | newbie |
@N3dst4 sorry if its confusing. Considering this $("div#target").on("click", "span.green", function() {...});, Let us say that span.green is referencing on 3 span elements on div#target and the one that has been clicked is the second element. How can I make the other span excluding the span (2nd span) that has been clicked to do something.
|
|
| Nov 8, 2013 at 12:11 | comment | added | N3dst4 | @newbie Can you rephrase the question? | |
| Nov 8, 2013 at 11:52 | comment | added | newbie |
@N3dst4 I see, One more question. How about if there is a plenty of span.green then one is clicked. How can I do some like this condition: if( not the clicked element ){ // do something } note: they all have same class.
|
|
| Nov 8, 2013 at 10:50 | comment | added | N3dst4 | @newbie - the callback can take an event argument, and the event has a .target: $("div#target").on("click", "span.green", function(event) { // do something with event.target }); | |
| Nov 8, 2013 at 6:21 | comment | added | newbie |
@N3dst4 I have a question about this. How would I know which span.green is click in this way?
|
|
| Oct 7, 2013 at 20:20 | comment | added | CharlieM | Also, to add to the idea of delegation. Say in the future, you have more elements called "span.green" added to #target, those span.green will also fire that function. | |
| Aug 1, 2013 at 7:45 | comment | added | N3dst4 | .on() is a general purpose API that can handle any kind of event, including multiple different events (you can put multiple event names in that first string.) .click() is just a shorthand for that first form. | |
| Jul 31, 2013 at 20:33 | comment | added | nipponese |
So why does on() allow two arguments when that would pretty much be the same as using click()?
|
|
| Apr 13, 2013 at 13:39 | comment | added | dgo | That is a great explanation, and has brought clarity to an issue that I have long refused to understand. Thanks! | |
| Nov 13, 2011 at 13:18 | vote | accept | moey | ||
| Nov 13, 2011 at 11:22 | history | answered | N3dst4 | CC BY-SA 3.0 |