Timeline for Vanilla JavaScript Event Delegation
Current License: CC BY-SA 3.0
23 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Jan 15, 2023 at 4:07 | comment | added | Sebastian Simon | Closely related: Attach event to dynamic elements in javascript. | |
| Jan 4, 2023 at 15:42 | answer | added | Roko C. Buljan | timeline score: 0 | |
| Nov 14, 2019 at 11:02 | answer | added | CertainPerformance | timeline score: 20 | |
| Feb 9, 2018 at 13:04 | answer | added | Kevin Drost | timeline score: 1 | |
| Nov 22, 2016 at 10:04 | history | edited | T.J. Crowder |
edited tags
|
|
| Jan 26, 2016 at 22:03 | history | rollback | j08691 |
Rollback to Revision 3
|
|
| Jan 26, 2016 at 21:52 | history | edited | Zakaria Acharki |
edited tags
|
|
| Nov 20, 2015 at 15:49 | comment | added | Blazemonger | Relevant David Walsh article | |
| Jun 1, 2014 at 19:37 | vote | accept | MrGuru | ||
| Jun 1, 2014 at 10:07 | history | edited | Ian Clark | CC BY-SA 3.0 |
Capitalising title
|
| Jun 1, 2014 at 9:50 | answer | added | Ian Clark | timeline score: 15 | |
| May 29, 2014 at 21:51 | comment | added | Ian Clark | I guess the jQuery implementation is pretty good :) | |
| May 7, 2014 at 5:11 | comment | added | cookie monster |
@MrGuru: The handler should be invoked once for each ancestor that matches the selector, and the ancestors should stop before the this element. So maybe $(event.target).parentsUntil(this, ".focused").each(settingsPanel)
|
|
| May 7, 2014 at 4:23 | comment | added | MrGuru | @cookiemonster I can use jQuery everywhere except listening for the event. Is the way I put in my question the proper way to do it? | |
| May 7, 2014 at 4:22 | history | edited | MrGuru | CC BY-SA 3.0 |
added 257 characters in body
|
| May 7, 2014 at 3:36 | comment | added | cookie monster |
@MrGuru: If you're implementing event delegation, then you know that the event.target was the element clicked, so that's the first one to test. But it could be that the event bubbled up from the event.target and encountered a different element that matches, so you'd usually want to include that. That's basically what jQuery does. Like <div class="focused"><span>click me</span></div>. The event.target will be the span, so we iterate up to find the .focused.
|
|
| May 7, 2014 at 3:35 | comment | added | Felix Kling | @MrGuru: Because that's how event delegation works. You have to see if any node in the element hierarchy matches the selector, starting with the element where the event originates and stopping at the element you bound the handler to. | |
| May 7, 2014 at 3:34 | comment | added | Felix Kling | Relevant: developer.mozilla.org/en-US/docs/Web/API/Element.matches | |
| May 7, 2014 at 3:34 | comment | added | MrGuru | @cookiemonster why would I find the child element and then go up? | |
| May 7, 2014 at 3:34 | comment | added | cookie monster | @EvanTrimboli: I don't like posting answers. I'll let someone else get the rep. Feel free if you'd like. | |
| May 7, 2014 at 3:33 | comment | added | Evan Trimboli | Would suggest you post that as an answer. | |
| May 7, 2014 at 3:32 | comment | added | cookie monster |
Start with the event.target, see if it matches the selector, and if so, invoke the function. Then iterate up through its ancestors and do the same until you get to the this element. You can use node.matchesSelector() to do the test, though in some browsers it's implemented with a browser-specific flag, so you'd either need to wrap it in a function, or put the flag method on Element.prototype.matchesSelector
|
|
| May 7, 2014 at 3:30 | history | asked | MrGuru | CC BY-SA 3.0 |