Emulate jQuery “on” with selector in pure Javascript

by

Update for 2017: current DOM standards like closest mean this is now much easier. 

const addEventForChild = function(parent, eventName, childSelector, cb){      
  parent.addEventListener(eventName, function(event){
    const clickedElement = event.target,
    matchingChild = clickedElement.closest(childSelector)
    if (matchingChild) cb(matchingChild)
  })
};

To use it just:

addEventForChild(parent, 'click', '.child', function(childElement){
  console.log('Woo click!', childElement)
})

Here’s a jsfiddle

More Related Contents:

  1. event.preventDefault() vs. return false
  2. What is DOM Event delegation?
  3. What is event bubbling and capturing?
  4. How can I trigger a JavaScript event click
  5. The value of “this” within the handler using addEventListener
  6. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  7. How to get a word under cursor using JavaScript?
  8. Intercept page exit event
  9. Listening for variable changes in JavaScript
  10. React onClick function fires on render
  11. How can I get the destination URL for the onbeforeunload event?
  12. How to check whether dynamically attached event listener exists or not?
  13. Reading client side text file using Javascript
  14. Accessing an object’s property from an event listener call in JavaScript
  15. Enter key press behaves like a Tab in Javascript
  16. Detect mousemove when over an iframe?
  17. How to delay calling of javascript function?
  18. How to detect in iOS webapp when switching back to Safari from background?
  19. Do Javascript promises block the stack
  20. Remove key press delay in Javascript
  21. Event Capturing vs Event Bubbling [duplicate]
  22. Detecting an image 404 in Javascript
  23. How to listen for child window closing?
  24. JavaScript Event prototype in IE8
  25. How browser executes Javascript and renders asynchronously
  26. How to optimize website for touch devices
  27. Prevent click event from firing when dblclick event fires
  28. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  29. Are dynamically inserted tags meant to work?
  30. Display Spreadsheet Data to HTML Table

Leave a Comment