dom-event-delegation Flashcards
What is the event.target?
event.target is the location of the most surface level element that was clicked on.
Why is it possible to listen for events on one element that actually happen to its descendent elements?
It is possible to listen for events on one element that actually happen to its descendent elements because of bubbling. When a child element is clicked and capture mode is set to the default value of false, first the descendent element is clicked but on the next level the parent element is clicked, then the parent of that parent is clicked, and so on. Event listeners will trigger from the most surface level child to the highest level parent.
What DOM element property tells you what type of element it is?
The DOM element property that tells you what type of element it is is the tagName property. event.target.tagName is the property to call from the target object which is the target property of the event object. The tagName returns the element type in an all capitalized string.
What does the element.closest() method take as its argument and what does it return?
The element.closest() method takes a selector or selectors as its argument element.closest(selectors) and it returns the closest ancestor element or itself which matches the selectors and if it cannot find that, then null.
How can you remove an element from the DOM?
To remove an element from the DOM use: 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?
To insert a new clickable DOM element into the page using JavaScript you can add an event listener on the parent element that you will be using appendChild on and in the event listener create a conditional statement that checks if the event.target.tagName is the same or the event.target.matches the right class and then do the action on the descendants.
