Native JS equivalent to jQuery delegation

by

What happens is basically this:

// $(document).on("click", <selector>, handler)
document.addEventListener("click", function(e) {
    for (var target=e.target; target && target!=this; target=target.parentNode) {
    // loop parent nodes from the target to the delegation node
        if (target.matches(<selector>)) {
            handler.call(target, e);
            break;
        }
    }
}, false);

However, e.currentTarget is document when the handler is called, and e.stop[Immediate]Propagation() will work differently. jQuery abstracts over that (including call order) a lot.

I’ve used the .matches() method, which is not yet standard but already available under different names in modern browsers. You might use a custom predicate to test elements instead of a selector. And addEventListener is obviously not oldIE-compatible.

More Related Contents:

  1. What is DOM Event delegation?
  2. How to make JavaScript execute after page load?
  3. onKeyPress Vs. onKeyUp and onKeyDown
  4. Firing event on DOM attribute change
  5. Event when window.location.href changes
  6. Why is the DOMSubtreeModified event deprecated in DOM level 3?
  7. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  8. How do I programmatically click on an element in JavaScript?
  9. Adding an onclick event to a table row
  10. Pass mouse events through absolutely-positioned element
  11. Unable to understand useCapture parameter in addEventListener
  12. Using this inside an event handler
  13. Change ‘s option and trigger events with JavaScript
  14. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  15. Are event handlers in JavaScript called in order?
  16. HTML DOM: Which events do not bubble?
  17. Do I need to remove event listeners before removing elements?
  18. link element onload
  19. Wait for iframe to load in JavaScript
  20. How to stop event bubbling with jquery live?
  21. event.toElement in IE8 and Firefox?
  22. cloning javascript event object
  23. Is there any way of passing additional data via custom events?
  24. JavaScript: How to simulate change event in internet explorer (delegation)
  25. How browser executes Javascript and renders asynchronously
  26. In web browsers, what’s the difference between onblur and onfocusout?
  27. Replacement for deprecated `keypress` DOM event
  28. Vanilla JS event delegation – dealing with child elements of the target element
  29. Manually dispatchEvent DOMContentLoaded
  30. How can I count text lines inside an DOM element? Can I?

Leave a Comment