5 ms·

I don't think there's a good replacement for: $(document).on("click", "#foo", function(){...}); either

by macca321 8y ago

benaadams 8y ago
Can do it in < 629 Bytes https://github.com/benaadams/delegate-dom.js https://github.com/benaadams/delegate-dom.js
- nailer 8y ago
  Indeed its easy! But damn it gets boring having everyone patch the DOM with things that should be in the standard DOM API already by now.
pawelk 8y ago
Event delegation was a thing before jQuery, and is not that hard to implement as a helper function, e.g. https://jsfiddle.net/jbctqupz/ https://jsfiddle.net/jbctqupz/
Vinnl 8y ago
Is that not simply document.getElementById('foo').addEventListener('click', function() { ... }); ?
- talmand 8y ago
  Well, it could be. As long as #foo exists on the page at the time that line is executed. If you inject #foo into the page after load then the click event won't work. The jquery example delegates #foo, so it can be injected in the page after load and the click event will still work. But there are ways to mimic the behavior as another person has pointed out.
- combatentropy 8y ago
  The vanilla equivalent of: $(document).on("click", "#foo", function(){...}); is: document.addEventListener('click', function (ev) { if (ev.target.matches('#foo')) { } }); The advantage is that #foo can come and go (after page load be injected and removed and injected again, but the event listener must be registered just once. Since the example is an ID (#foo) the advantage is less obvious. Something like a class (.foo) makes it clearer that there could be many, and it could get expensive to attach an event handler to each one --- though I'm guessing it takes hundreds before it becomes a big deal. But again, .foo's can come and go without having to worry about reattaching the event handler. P. S. My library, https://github.com/combatentropy/listenup.js https://github.com/combatentropy/listenup.js (31 lines)

I don't think there's a good replacement for: $(document).on("click", "#foo", function(){...}); either

benaadams 8y ago

Can do it in < 629 Bytes https://github.com/benaadams/delegate-dom.js https://github.com/benaadams/delegate-dom.js

nailer 8y ago
Indeed its easy! But damn it gets boring having everyone patch the DOM with things that should be in the standard DOM API already by now.

pawelk 8y ago

Event delegation was a thing before jQuery, and is not that hard to implement as a helper function, e.g. https://jsfiddle.net/jbctqupz/ https://jsfiddle.net/jbctqupz/

Vinnl 8y ago

Is that not simply document.getElementById('foo').addEventListener('click', function() { ... }); ?

talmand 8y ago
Well, it could be. As long as #foo exists on the page at the time that line is executed. If you inject #foo into the page after load then the click event won't work. The jquery example delegates #foo, so it can be injected in the page after load and the click event will still work. But there are ways to mimic the behavior as another person has pointed out.
combatentropy 8y ago
The vanilla equivalent of: $(document).on("click", "#foo", function(){...}); is: document.addEventListener('click', function (ev) { if (ev.target.matches('#foo')) { } }); The advantage is that #foo can come and go (after page load be injected and removed and injected again, but the event listener must be registered just once. Since the example is an ID (#foo) the advantage is less obvious. Something like a class (.foo) makes it clearer that there could be many, and it could get expensive to attach an event handler to each one --- though I'm guessing it takes hundreds before it becomes a big deal. But again, .foo's can come and go without having to worry about reattaching the event handler. P. S. My library, https://github.com/combatentropy/listenup.js https://github.com/combatentropy/listenup.js (31 lines)