const button = document.querySelector(".button");
button.addEventListener("click", function (evt) {
// the event Target variable will contain the button element that we clicked on
const eventTarget = evt.target;
eventTarget.setAttribute("disabled", true);
});
// Make a list
const ul = document.createElement('ul');
document.body.appendChild(ul);
const li1 = document.createElement('li');
const li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
function hide(evt) {
// e.target refers to the clicked <li> element
// This is different than e.currentTarget, which would refer to the parent <ul> in this context
evt.target.style.visibility = 'hidden';
}
// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener('click', hide, false);
const theTarget = someEvent.target;
event.target returns the node that was targeted by the function.
This means you can do anything you would do with any other node like one
you'd get from document.getElementById
// Make a list
const ul = document.createElement('ul');
document.body.appendChild(ul);
const li1 = document.createElement('li');
const li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
function hide(evt) {
// evt.target refers to the clicked <li> element
// This is different than evt.currentTarget, which would refer to the parent <ul> in this context
evt.target.style.visibility = 'hidden';
}
// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener('click', hide, false);