[elm-discuss] Event delegation

[flip101]

with jQuery i use event delegation from time to
time https://api.jquery.com/on/

it puts the event handler on a parent element
then when a child is clicked the event bubbles upwards to the parent
the selector is then check to see if it matches (not at the time it was
bind)

this can be a lot faster then attaching event handlers to each dom element
separately. Especially in the case of a lot of handlers.

How does elm handle this? Should i do anything special in my code or just
bind to each element?

[Max Goldstein]

I'm honestly not sure. Have you tried attaching the event handler to the
parent element, i.e. creating the DOM you would with jQuery, and seeing if
it works?

[James Gray]

with jQuery i use event delegation from time to time
https://api.jquery.com/on/

elm-html list's `on` under "Custom Event Handlers." Perhaps that could
help.

James Edward Gray II

[flip101]

I guess "on" could work when inspecting the event information to see if the
right child was
clicked. http://package.elm-lang.org/packages/evancz/elm-html/4.0.1/Html-Events#on

But i'm not sure if this is even something that i should be using in elm...

Post by James Gray

with jQuery i use event delegation from time to time
https://api.jquery.com/on/

elm-html list's `on` under "Custom Event Handlers." Perhaps that could
help.
James Edward Gray II

[Kevin McGee]

I've been wondering the same thing. So far, I haven't found any specific
guidance or handling of this.

ReactJS, AFAIK, automatically implements event delegation such that there
is a single EventListener on the page -- though I could easily be wrong
here.

Elm -- as far as I can tell so far -- doesn't (yet) offer anything
out-of-the-box.

with jQuery i use event delegation from time to time
https://api.jquery.com/on/
it puts the event handler on a parent element
then when a child is clicked the event bubbles upwards to the parent
the selector is then check to see if it matches (not at the time it was
bind)
this can be a lot faster then attaching event handlers to each dom element
separately. Especially in the case of a lot of handlers.
How does elm handle this? Should i do anything special in my code or just
bind to each element?

[Boryslav Larin]

Here’s what I found after quick dive into elm app startup. Looks like it behaves pretty much like React, making one event listener on root node and later delegate all events in lib. So I guess onClick handler on every node wouldn’t be big performance or memory hit.

var commonEvents = [
"blur", "change", "click", "contextmenu", "dblclick",
"error","focus", "focusin", "focusout", "input", "keydown",
"keypress", "keyup", "load", "mousedown", "mouseup",
"resize", "scroll", "select", "submit", "touchcancel",
"touchend", "touchstart", "unload"
]

/* Delegator is a thin wrapper around a singleton `DOMDelegator`
instance.

Only one DOMDelegator should exist because we do not want
duplicate event listeners bound to the DOM.

`Delegator` will also `listenTo()` all events unless
every caller opts out of it
*/
module.exports = Delegator

function Delegator(opts) {
opts = opts || {}
var document = opts.document || globalDocument

var cacheKey = document["***@9"]

if (!cacheKey) {
cacheKey =
document["***@9"] = cuid()
}

var delegator = delegatorCache.delegators[cacheKey]

if (!delegator) {
delegator = delegatorCache.delegators[cacheKey] =
new DOMDelegator(document)
}

if (opts.defaultEvents !== false) {
for (var i = 0; i < commonEvents.length; i++) {
delegator.listenTo(commonEvents[i])
}
}

return delegator
}

Delegator is later used to subscribe to events with onClick and others
--
Boryslav Larin
[phone] | ***@gmail.com
http://brabadu.com
Twitter: http://twitter.com/brabadu

I've been wondering the same thing. So far, I haven't found any specific guidance or handling of this.
ReactJS, AFAIK, automatically implements event delegation such that there is a single EventListener on the page -- though I could easily be wrong here.
Elm -- as far as I can tell so far -- doesn't (yet) offer anything out-of-the-box.
with jQuery i use event delegation from time to time https://api.jquery.com/on/
it puts the event handler on a parent element
then when a child is clicked the event bubbles upwards to the parent
the selector is then check to see if it matches (not at the time it was bind)
this can be a lot faster then attaching event handlers to each dom element separately. Especially in the case of a lot of handlers.
How does elm handle this? Should i do anything special in my code or just bind to each element?
--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
For more options, visit https://groups.google.com/d/optout.

[Kevin McGee]

Very nice work @Boryslav Larin!
Thanks for posting.
KJM

Here’s what I found after quick dive into elm app startup. Looks like it
behaves pretty much like React, making one event listener on root node and
later delegate all events in lib. So I guess onClick handler on every node
wouldn’t be big performance or memory hit.
var commonEvents = [
"blur", "change", "click", "contextmenu", "dblclick",
"error","focus", "focusin", "focusout", "input", "keydown",
"keypress", "keyup", "load", "mousedown", "mouseup",
"resize", "scroll", "select", "submit", "touchcancel",
"touchend", "touchstart", "unload"
]
/* Delegator is a thin wrapper around a singleton `DOMDelegator`
instance.
Only one DOMDelegator should exist because we do not want
duplicate event listeners bound to the DOM.
`Delegator` will also `listenTo()` all events unless
every caller opts out of it
*/
module.exports = Delegator
function Delegator(opts) {
opts = opts || {}
var document = opts.document || globalDocument
if (!cacheKey) {
cacheKey =
}
var delegator = delegatorCache.delegators[cacheKey]
if (!delegator) {
delegator = delegatorCache.delegators[cacheKey] =
new DOMDelegator(document)
}
if (opts.defaultEvents !== false) {
for (var i = 0; i < commonEvents.length; i++) {
delegator.listenTo(commonEvents[i])
}
}
return delegator
}
Delegator is later used to subscribe to events with onClick and others
--
Boryslav Larin
http://brabadu.com
Twitter: http://twitter.com/brabadu

Post by Kevin McGee
I've been wondering the same thing. So far, I haven't found any specific

guidance or handling of this.

Post by Kevin McGee
ReactJS, AFAIK, automatically implements event delegation such that

there is a single EventListener on the page -- though I could easily be
wrong here.

Post by Kevin McGee
Elm -- as far as I can tell so far -- doesn't (yet) offer anything

out-of-the-box.

Post by Kevin McGee
with jQuery i use event delegation from time to time

https://api.jquery.com/on/

Post by Kevin McGee
it puts the event handler on a parent element
then when a child is clicked the event bubbles upwards to the parent
the selector is then check to see if it matches (not at the time it was

bind)

Post by Kevin McGee
this can be a lot faster then attaching event handlers to each dom

element separately. Especially in the case of a lot of handlers.

Post by Kevin McGee
How does elm handle this? Should i do anything special in my code or

just bind to each element?

Post by Kevin McGee
--
You received this message because you are subscribed to the Google

Groups "Elm Discuss" group.

Post by Kevin McGee
To unsubscribe from this group and stop receiving emails from it, send
For more options, visit https://groups.google.com/d/optout.

[flip101]

Oh that's good to know! i always imaged virtual-dom (and family) would
place event listeners all over the place on strategic points. Picking a
lower node than the root node actually increases performance (in theory at
least) .. but i guess with the speed virtual-dom can achieve already it's
not a big deal.

Here’s what I found after quick dive into elm app startup. Looks like it
behaves pretty much like React, making one event listener on root node and
later delegate all events in lib. So I guess onClick handler on every node
wouldn’t be big performance or memory hit.
var commonEvents = [
"blur", "change", "click", "contextmenu", "dblclick",
"error","focus", "focusin", "focusout", "input", "keydown",
"keypress", "keyup", "load", "mousedown", "mouseup",
"resize", "scroll", "select", "submit", "touchcancel",
"touchend", "touchstart", "unload"
]
/* Delegator is a thin wrapper around a singleton `DOMDelegator`
instance.
Only one DOMDelegator should exist because we do not want
duplicate event listeners bound to the DOM.
`Delegator` will also `listenTo()` all events unless
every caller opts out of it
*/
module.exports = Delegator
function Delegator(opts) {
opts = opts || {}
var document = opts.document || globalDocument
if (!cacheKey) {
cacheKey =
}
var delegator = delegatorCache.delegators[cacheKey]
if (!delegator) {
delegator = delegatorCache.delegators[cacheKey] =
new DOMDelegator(document)
}
if (opts.defaultEvents !== false) {
for (var i = 0; i < commonEvents.length; i++) {
delegator.listenTo(commonEvents[i])
}
}
return delegator
}
Delegator is later used to subscribe to events with onClick and others
--
Boryslav Larin
http://brabadu.com
Twitter: http://twitter.com/brabadu

Post by Kevin McGee
I've been wondering the same thing. So far, I haven't found any specific

guidance or handling of this.

Post by Kevin McGee
ReactJS, AFAIK, automatically implements event delegation such that

there is a single EventListener on the page -- though I could easily be
wrong here.

Post by Kevin McGee
Elm -- as far as I can tell so far -- doesn't (yet) offer anything

out-of-the-box.

Post by Kevin McGee
with jQuery i use event delegation from time to time

https://api.jquery.com/on/

Post by Kevin McGee
it puts the event handler on a parent element
then when a child is clicked the event bubbles upwards to the parent
the selector is then check to see if it matches (not at the time it was

bind)

Post by Kevin McGee
this can be a lot faster then attaching event handlers to each dom

element separately. Especially in the case of a lot of handlers.

Post by Kevin McGee
How does elm handle this? Should i do anything special in my code or

just bind to each element?

Post by Kevin McGee
--
You received this message because you are subscribed to the Google

Groups "Elm Discuss" group.

Post by Kevin McGee
To unsubscribe from this group and stop receiving emails from it, send
For more options, visit https://groups.google.com/d/optout.

[Ethan Martin]

The documentation could be improved from saying "you'll probably never need
this" to "use custom events for delegation."

with jQuery i use event delegation from time to time
https://api.jquery.com/on/
it puts the event handler on a parent element
then when a child is clicked the event bubbles upwards to the parent
the selector is then check to see if it matches (not at the time it was
bind)
this can be a lot faster then attaching event handlers to each dom element
separately. Especially in the case of a lot of handlers.
How does elm handle this? Should i do anything special in my code or just
bind to each element?