Handling events
Add an event handler
Let's say we have a simple function that will run when an element is clicked. This will just log the word "clicked!" to the console.
const handler = function (event) {
// elem was clicked!
console.log('clicked!');
}Now, to run the function when an element is clicked, we use the .addEventListener() method found on the element that we want to wait for clicks. When a user clicks the element, the handler function will run, logging the word to the console.
elem.addEventListener('click', handler);Self remove an event handler
In some cases you might want to remove a listener. To do this, the .removeEventListener() method is used. The parameters must be the same ones used in the .addEventListener() method for this element.
const handler = function (event) {
// event.type === 'click'
event.target.removeEventListener(event.type, handler);
// elem was clicked!
console.log('clicked!');
}
elem.addEventListener('click', handler);Only fire once
There's also an easy way to have an listener once fire the function once, without having to include .removeEventListener().
const handler = function (event) {
// elem was clicked!
console.log('clicked!');
}
elem.addEventListener('click', handler, { once: true });