JavaScript Event Listening

The latest feature of JavaScript event handling is event listening. Event listening monitors events on elements.

We will useaddEventListener()method to replace directly assigning events to element attributes.

addEventListener() method

addEventListener()This method attaches an event handler to the specified element.

We can rewrite the random color example (from the previous chapter) as follows:

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

We still use withbeforesamebgChange()Function. We willaddEventListener()Method attached to the button.

addEventListener() Accepts two required parameters-The event to be listened to and the listener callback function.

This method is similar to the event handler attribute (in the previous chapter), but the syntax is obviously different.

Syntax:

element.addEventListener(event, listener, useCapture)

The first parameter is the type of the event (for example, 'click' or 'mousemove').

The second parameter is the event listener function we want to call when the event occurs.

The third parameter is a boolean value that specifies whether to use event bubbling or event capturing. This parameter is optional.

Add event listeners to the element

Please note that put all the code insideaddEventListener()It is very suitable in anonymous functions within methods, as shown below:

let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});

You can also refer to external 'named' functions:

let para = document.querySelector("#para");
para.addEventListener("click", changeText);
function changeText() {
　　　para.innerHTML = "Hello world";
}

Add multiple event listeners to the same element

At first glance, event listeners seem very similar to event handler properties, but they have some advantages. We can set multiple event listeners on the same element, as shown in the following example:

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);

We can add different types of events to elements:

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);

passing parameters

When passing parameter values, please use an anonymous function that calls the specified function using parameters:

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});

add event listeners to the Window object

In addition, you canaddEventListener()inDocumentandWindowobject.

This example uses the followingaddEventListener()The method attaches the click event to the document:

document.addEventListener("click", function() {
alert("Hello World!!!");
});

This example uses the followingaddEventListener()The method attaches the resize (resize) event to the window:

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});

Currently, event listening is the most common and preferred way to handle events in JavaScript.

removeEventListener() method

You can also use theremoveEventListener()The method removes one or all events from an element.

var box = document.getElementById("para");
//　Attach an event handler to a P element with id="para"
box.addEventListener("mousemove", myFunc);
//　Remove the event handler from a P element with id="para"
box.removeEventListener("mousemove", myFunc);

The first parameter is the type of the event (for example, 'click' or 'mousemove').

The second parameter is the function to be called when the event occurs.

More Reading

JavaScript Reference:HTML DOM Event Object Reference