Understanding AddEventListener in JavaScript

Add Event Listener is one of the things that make your website interactive and interesting. For JavaScript beginners, understanding AddEventListener and know how to write it are essential. In this blog post, a few pointers help you write your AddEventListener with a better understanding.

Photo by Icons8 team on Unsplash

THE BASICS

target.addEventListener(eventType, function);

1. .addEventListener() follows the target, aka, the element in your HTML.
2. the first parameter is the event type, ie click, mouseover, DOMContentLoaded, etc.
3. the second parameter is the callback function. In other words, what do you want to do when the user activates the event.

ADDING MULTIPLE EVENT LISTENERS TO THE SAME TARGET

You can target the same element and add different events to it doing things that you want them to do.

Basic Syntax:

const function1 = (e) => {}
const function2 = (e) => {}
const function3 = (e) => {}
sameTarget.addEventListener(event1, function1);
sameTarget.addEventListener(event2, function2);
sameTarget.addEventListener(event3, function3);

See the below example:

ADDING THE SAME EVENT LISTENER TO MULTIPLE ELEMENTS

When you need to add the same event listener to different elements on the page, of course, if they are already on the page, not something created by another event listener, we can target each of every one of them and addEventListener. But it makes our code very repetitious. Most commonly, when we want to reuse an event listener on different elements, those elements are close by under the same parent node. In this case, we can use their parent node and iterate through every individual child. Or select all the elements and iterate through every one of them, and addEventListener. Use e.target to specify when writing the function.

basic syntax:

const function = (e) => {}
const parentNode = document.querySelector('parentNode')
for (child of parentNode) {
    child.addEventListener(event, function);
}
or 
const elements = document.querySelectorAll('element')
for (elem of elements) {
    elem.addEventListener(event, function);
}

See the below example:

ADDEVENTLISTENER TO ELEMENTS CREATED BY ANOTHER EVENT LISTENER

Because the variable you assign to the element you created inside a function is a local variable to the creation function, meaning other functions don’t know what it is, let alone using it.

See a wrong example below:

const creationFn = () => {
const h1 = document.createElement('h1')
}
const printH1Fn = () => {
console.log(h1)
}
printH1Fn(); //=> when you call this funtion, the dom will give you error saying h1 is not defined.

to use the variable, the addEventListener has to live inside the creation event listener which created the element, and pass the element down to the callback function as its argument.

basic syntax:

target.addEventListener(event, (e) => {
const element = document.createElement('element')
element.addEventListener(event, (e) => {callBackFn(element)}
}

see an example below:

Tips on using e.target to locate your elements: console.log BETTER

basic syntax:

console.log(
            'name of the Variable1:', varibale1,
            'name of the Variable2:', varibale2,
            'name of the Variable3:', varibale3
)

see the example below:

Bonus: removeEventListener

basic syntax:

target.removeEventListener(eventType, function);