• Thursday , 21 November 2019

JavaScript DOM Tutorial #9 – Events

Code Canyon



Hey gang, in this JavaScript DOM tutorial I’ll explain how we can attach event listeners to elements on a page, which can react to DOM events such as click, submit etc.

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

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

—– JAVASCRIPT FOR BEGINNERS:

—– CSS FOR BEGINNERS:

—– NODE.JS TUTORIALS

—– 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

Original source

3d Ocean

Related Posts

32 Comments

  1. Sam Davies
    November 8, 2019 at 18:35

    Why use parentNode.removeChild() instead of simply using li.remove()?

  2. Mohamed Yunus
    November 8, 2019 at 18:35

    Great tutorial! Aside note may help someone that
    Instead of writing this to remove the li
    const li = e.target.parentElement;

    li.parentNode.removeChild(li);
    we can explicitly use the remove method on the li
    const li = e.target.parentElement.remove();

  3. Hoda Salah
    November 8, 2019 at 18:35

    please sir when i use querySelectorAll() to buttons it works when the variable was before addُُُُevenelistner but when i but the variable at the top of my file with other variables the function doesn't work Though variable is correct and still can call it with console.log() so i changed querySelectorAll() to getElementsBy ClassName() the function work correctly can i know why

  4. taha znazen
    November 8, 2019 at 18:35

    thanx mr splinter for this great tutorial

  5. Patrick C.
    November 8, 2019 at 18:35

    Shaun, you're information is so important and valuable! I love it, keep going!

  6. Zerox
    November 8, 2019 at 18:35

    Does the MouseEvent object gets created when we click on the thing that has event listener or does that object already exists?

  7. Abdulrahim Muhammad
    November 8, 2019 at 18:35

    Great vids man.. Really learning a ton!
    Whats the reason for preventing the Default from happening..?

  8. Syed Mishar Newaz
    November 8, 2019 at 18:35

    nice tutorial

  9. nipuna rodrigo
    November 8, 2019 at 18:35

    It would be really great if you would use named functions, its somewhat hard to catch up when you use anonymous functions

  10. Feminishit
    November 8, 2019 at 18:35

    it is the best channel for those who are starting their JavaScript careers

  11. arash kenji
    November 8, 2019 at 18:35

    how can i find js file for this video

  12. Cyril Macauley
    November 8, 2019 at 18:35

    code on video did not work. code on gitHub

    Uncaught TypeError: Cannot read property 'addEventListener' of null
    at app.js:18

  13. Mark Balazo
    November 8, 2019 at 18:35

    Salamat for these great vids The Net Ninja 😊

  14. LionKing352
    November 8, 2019 at 18:35

    You're the man!

  15. Eyal S
    November 8, 2019 at 18:35

    Great videos.
    Thanks a lot.
    Please upload more 😊

  16. Adam
    November 8, 2019 at 18:35

    I'd like to take a moment to tell you that I appreciate the fact that you went back and edited your videos with updated/correct info. You're a good dude!

  17. Daniel C
    November 8, 2019 at 18:35

    Great tutorial. Thanks a lot :D!!

  18. Dan Jilov
    November 8, 2019 at 18:35

    thanks a lot man. But why you prefer use e(event) keyword instead use this keyword? Like this
    const btns = document.querySelectorAll('#book-list .delete');

    btns.forEach(btn => {
    btn.addEventListener('click', function () {
    // get current li
    const li = this.parentNode;
    // delete current li
    li.remove();
    })
    })

  19. Carl
    November 8, 2019 at 18:35

    What font do you use in your text editor? It's very readable and I like it.

  20. pastuh
    November 8, 2019 at 18:35

    Very interesting and looks like simple 🙂
    Thanks

  21. Nelson Ongiti
    November 8, 2019 at 18:35

    I HAVE INCLUDED BREAK DOWN AND EXPLANATION OF THIS EXAMPLE : HOPE IT HELPS SOMEONE
    'use strict'
    //STEP : 1
    //so our task is to fire an click event on all buttons so that when the button is clicked the whole li is deleted
    //first thing below is to get all the li elements
    //below i have gotten and put all my buttons under deleteBtn variable
    let deleteBtn = document.querySelectorAll('#book-list .delete'); //buttons gotten
    //STEP : 2
    //From the group of buttons elements we got, we can now apply or fire the event to a single button element or button
    // so below we convert the nodelist or html collection into an array and sork on a single button
    Array.from(deleteBtn).forEach(function(button){
    //STEP : 3
    //for every single button we click let us apply an event to that particularly clicked button
    button.addEventListener('click', function(e){
    //get the event to work on the item that was selected in our case li
    //once the button is clicked then we want all the entire li element to be the target of the event
    //STEP : 4
    const li = e.target.parentElement;
    //STEP : 5
    //below we call the action that we want the event to perform on the single element
    //now call the parent of the button and remove the particular childelement selected in our case the entire li
    li.parentNode.removeChild(li);
    });
    });

  22. Alex Falkenberg
    November 8, 2019 at 18:35

    Thank you! Your Channel is my favourite for Frontend 🙂

  23. Huey P. Freeman
    November 8, 2019 at 18:35

    Every time I try to create a group of elements I find the parentNode after the console tell me the correct parent node, I ask for the childNodes and it returns "text" but thats not even the worst part. When ever I check to see what the length of the child nodes are it tells me 1 even though I've grouped everything into a header or a div, I get the answer that the length is just one. Can you help me understand please ? Thank You

  24. Nataly Garzon
    November 8, 2019 at 18:35

    You have no idea how helpful these videos have been for me to really understand the DOM. I was so confused from my readings and this clarified beautifully. Thank you so much!

  25. Christos
    November 8, 2019 at 18:35

    EventTarget – Web APIs | MDN
    https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

  26. Philip Tabone
    November 8, 2019 at 18:35

    Fixes like so:

    Array.from(listitms).forEach(function(rem){
    rem.addEventListener('click',function(tgt){
    const li = tgt.target;
    console.log(li);
    li.parentNode.removeChild(li);
    });
    });

    you may omit console.log

  27. Tylik Stec
    November 8, 2019 at 18:35

    Code from video ('#book-list.delete') differs from code available on your github repo ('#book-list ul li'). Code from github is correct, code from video doesn't work so I have no idea how it worked for you.

  28. David Eugene
    November 8, 2019 at 18:35

    Merci 🙂

  29. John Zach
    November 8, 2019 at 18:35

    Great tutorial. One problem is that if a button has a span or it generally has other elements then e.target might be not what we would want. I much prefer to use "this" since it always refers to the clicked element.

  30. Tomasz Siniak
    November 8, 2019 at 18:35

    Great, I've tried to set up removing element 'li' in my project according this video. IT works, but in console occurs bug "Cannot read property 'removeChild' of null" . Does anybody knows how to fix it ?

  31. Anna Sawicka
    November 8, 2019 at 18:35

    great tutorial! pls keep going and upload more content on java script 🙂 greetings from POLAND!

  32. sridhar belide
    November 8, 2019 at 18:35

    Could you pls share what is there in your browser bookmarks?

Leave A Comment

You must be logged in to post a comment.