dom-event-delegation Flashcards
What is the event.target
It shows you the html version of the element you are committing an action upon (when console logged)
property of the event object that holds the data of where the event actually occured
Why is it possible to listen for events on one element that actually happen its descendent elements?
because when an action occurs on a descendant element, it also occurs on all of its ancestors simultaneously … aka bubbling
What DOM element property tells you what type of element it is?
element.target.tagName will return the element tag name in an ‘ALL CAPS STRING’
What DOM element property tells you what type of element it is?
element.target.tagName will return the element tag type in an ‘ALL CAPS STRING’
What does the element.closest() method take as its argument and what does it return?
element.closest returns the value of the nearest parent element that matches the element passed in the argument. takes in a css selector
closest is the opposite of query selector. qs looks inward, closest looks outward
What does the element.closest() method take as its argument and what does it return?
element.closest returns the value of the nearest parent element that matches the element passed in the argument.
What does the element.closest() method take as its argument and what does it return?
element.closest(‘ .div-class’) returns the value of the nearest parent element that matches the element passed in the argument in css selector form
How can you remove an element from the DOM?
element.remove()
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
I would figure out which ancestor element they would all be under (closest()), then I would apply the event listener to that ancestor and listen for specific actions that occur on the specific element type. aka use delegation
