D4mations.com

JavaScript DOM Tutorial #9 – Events



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

d4mer

, , , , , , , , , , ,

32 responses to “JavaScript DOM Tutorial #9 – Events”

  2. 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. 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

  18. 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();
    })
    })

  21. 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);
    });
    });

  23. 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

  30. 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 ?

Leave a Reply