Implementing jQuery’s “live” binder with native Javascript

by

Here’s a simple example:

function live(eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        if (event.target.id === elementId) {
            cb.call(event.target, event);
        }
    });
}

live("click", "test", function (event) {
    alert(this.id);
});

The basic idea is that you want to attach an event handler to the document and let the event bubble up the DOM. Then, check the event.target property to see if it matches the desired criteria (in this case, just that the id of the element).

Edit:

@shabunc discovered a pretty big problem with my solution– events on child elements won’t be detected correctly. One way to fix this is to look at ancestor elements to see if any have the specified id:

function live (eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        var el = event.target
            , found;

        while (el && !(found = el.id === elementId)) {
            el = el.parentElement;
        }

        if (found) {
            cb.call(el, event);
        }
    });
}

More Related Contents:

  1. event.preventDefault() vs. return false
  2. jQuery equivalent of JavaScript’s addEventListener method
  3. window.onload vs $(document).ready()
  4. jQuery.click() vs onClick
  5. Detecting Browser Autofill
  6. Trigger a keypress/keydown/keyup event in JS/jQuery?
  7. Firing event on DOM attribute change
  8. How can I capture the right-click event in JavaScript? [duplicate]
  9. How can I trigger an onchange event manually? [duplicate]
  10. event.preventDefault() vs. return false (no jQuery)
  11. How do you log all events fired by an element in jQuery?
  12. Handle URL fragment identifier (anchor) change event in Javascript
  13. Jquery Event won’t fire after ajax call
  14. Need to cancel click/mouseup events when double-click event detected
  15. How do you handle oncut, oncopy, and onpaste in jQuery?
  16. Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
  17. Capture click on div surrounding an iframe
  18. How do you detect the clearing of a “search” HTML5 input?
  19. How to check if any JavaScript event listeners/handlers attached to an element/document? [duplicate]
  20. Are event handlers in JavaScript called in order?
  21. Mozilla firefox not working with window.onbeforeunload
  22. Why is ‘event’ available globally in Chrome but not Firefox?
  23. How to tell which row number is clicked in a table?
  24. full-screen browser window on load document
  25. Is event a global variable that is accessible everywhere inside the callback chain?
  26. submit event does not fire if submit initiated programmatically
  27. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  28. jQuery .on() method doesn’t see new elements
  29. Fire oninput event with jQuery
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment