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:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

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

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

Рекомендации по теме

Комментарии

After all these years without having any clue about how the DOM really works, I found your channel and it has been my best experience learning this topic so far.

Thanks, Ninja guy.

santiagomedina

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!

Adam-eats

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!

ThatNatalyGirl

Your DOM tutorial playlist is the only one that made me understand how everything works. Easy and straight to the point. :)

Xxxsorrow

The Best Youtube Channel On The Planet Earth <3
.

online.development

that's the most useful js DOM tutorial i've seen so far.
keep it going

soufiboy

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

patrickc.

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

a.s.

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

incredibleindians

Your DOM JS explanation are amazing! Its one of the best explanation videos i found on YT (and i watched many). Question though, being that these videos are 4 years old, is the syntax is still the best approach? My understanding is that JS changes every year, so just want to get that clear. TY

jfr

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

//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

});
});

kalamashaka

This is small, but how he says SeLecctoRRR cracks me up

elementtestdianhua

Love the series!!! (seriously!!!) Quick question -> Why do we do this (Note: I used 'deleteTag(s)' instead of 'btn(s)')

deleteTag.addEventListener('click', e => {
let currentLi = e.target.parentElement;

})

instead of this

deleteTag.addEventListener('click', e => {

});

I'm just wondering if there's a best practice that says you should use the parent element to remove a child element as opposed to a more direct approach.

timbauer

It's a very good explanation of DOM.

rostyslavklyba

thanx mr splinter for this great tutorial

tahaznazen

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

we can explicitly use the remove method on the li
const li =

mohamedyunus

Hi guys... When do I know what to use? With regards to parentElement and parentNode? I mean, it still works whichever I use. Does it matter? I'm talking about this part:
const li = e.target.parentElement;
//I could still use .parentNode here...
//and parentElement here...

tartmax

Very interesting and looks like simple :)
Thanks

pastuh

Great videos.
Thanks a lot.
Please upload more 😊

eyalshnitzerful

Salamat for these great vids The Net Ninja 😊

markbalazo

JavaScript DOM Tutorial #9 - Events

JavaScript DOM Tutorial #9 - Events

JavaScript Tutorial #9 - DOM & Events

JavaScript DOM Tutorial #9 JavaScript Statements, Semicolons, White Space and Comments [With Source]

#9. JAVASCRIPT DOM(DOCUMENT OBJECT MODEL ) & WINDOW OBJECTS

Learn DOM Manipulation In 18 Minutes

Learn JavaScript #9 - DOM (Document Object Model)

Javascript DOM Full Tutorial

DOM e gestione elementi ~ Lezione 9 parte 1 JavaScript

Mastering JavaScript Selectors: Class, ID, Tags & Query - Pramish Bhusal | Zoom Meeting #9

JavaScript DOM Tutorial #10 - Event Bubbling

Introdução ao DOM - Curso JavaScript #09

JavaScript Tutorial für Anfänger #22 - Das Document Object Model DOM

9- Dom Manipulation | JavaScript Crash Course

JavaScript Tutorial for Beginners Part 9: DOM

JavaScript DOM Tutorial #2 - Get Element By ID

JavaScript DOM Tutorial #1 - Introduction

JavaScript DOM Tutorial | Document Object Model in JavaScript

JavaScript DOM Tutorial #11 - Interacting with Forms

JavaScript DOM Tutorial #12 - Creating Elements

Using the isEqualNode() Method - JavaScript DOM Tutorial

⭐[JS] 20 APRENDE a manipular el DOM (Documento Object Model) 📚 Curso JAVASCRIPT

JavaScript DOM Tutorial #3 - Get Elements By Class or Tag

Bangla JavaScript DOM Tutorial #9 - Append Child

appendChild() - JavaScript DOM Tutorial For Beginners