SHARE

Yo gang, in this JavaScript DOM tutorial I’ll explain the concept of event bubbing, and how we can use it to our advantage when setting up event listeners.

—– COURSE LINKS:
+ Atom editor – https://atom.io/a
+ GitHub Repo – https://github.com/iamshaunjp/JavaScript-DOM-Tutorial

———————————————————————————————
Other tutorials:

—– JAVASCRIPT FOR BEGINNERS:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

—– CSS FOR BEGINNERS:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

—– NODE.JS TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

—– SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

11 COMMENTS

  1. Great tutorial on event delegation but unfortunately it's not considered best practice for various reasons. For example if your target element has elements inside it then the e.target will be the children and NOT what we think they would be!

    There are two options. The easy one is to use css and add pointer-events:none; to the child elements. This works great and has good enough compatibility.

    The more difficult option is to use e.target.closest(selector). This requires a bit of practice to master, but it's the preferred way to do event delegation.

    https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

    I'm leaving this comment so that nobody has to spend hours debugging like I did a few months ago.

  2. Hey man,
    I believe in that case you can just simply use remove() method without grabing parent node. Correct me if I'm wrong 🙂

    P.S. I really love your channel, keep up good work sir!

  3. Hi Shaun, another great playlist! I would suggest to keep li.parentNode.removeChild(li) since that way the event handling function can be reused on some other elements without the need to change variable 'list' inside the function, or at least to better decouple it from the variables outside its scope, a situation that I often encountered in my experience.

LEAVE A REPLY

Please enter your comment!
Please enter your name here