This article explains how to acquire events and execute processing using the addEventListener method and on event handler in JavaScript .
How can I get events using JavaScript?
There are several ways to retrieve events.
The recommended method is to use the addEventListener method.
How to obtain events using the addEventListener method
The addEventListener method registers a function to be executed when a specific event occurs .
Use the following format.
target . addEventListener ( type , listener [, options ]);
- target: Specify the element to get the event.
- type: Specify the type of event to retrieve. For example, click, mouseover, keydown, etc.
- listener: Specifies the function to run when the event occurs.
- options: You can optionally specify capture, once, passive, etc.
For example, to get a click event, write as follows.
document.getElementById("target").addEventListener("click", function() {
console.log("クリックされました");
});In the above example, when the element with id “target” is clicked, the string “Clicked” will be output to the console.
Additionally, the addEventListener method allows you to register multiple functions for the same event. You can register multiple functions as shown below.
document.getElementById("target").addEventListener("click", function() {
console.log("関数1");
});
document.getElementById("target").addEventListener("click", function() {
console.log("関数2");
});In the above example, when the element with id “target” is clicked, the strings “Function 1” and “Function 2” are output to the console in order.
The addEventListener method can be used flexibly, such as by being able to acquire multiple events at the same time , so it can be said to be one of the most common methods of acquiring events in JavaScript.
Sample program using addEventListener method
In this example, when you click the button, the number of times it is clicked is counted up and an alert is displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of how to retrieve events using the addEventListener method</title>
</head>
<body>
<button id="myButton">click</button>
<script>
// Get button element
const myButton = document.getElementById('myButton');
// Variable to count the number of clicks
let count = 0;
// Register an event listener on the button
myButton.addEventListener('click', () => {
count++;
alert(`Clicked Number of clicks: ${count}`);
});
</script>
</body>
</html>In this example, the addEventListener method is used to retrieve the click event; the first argument of the addEventListener method is the name of the event to be retrieved and the second argument is the function to be executed. In the function, the number of clicks is counted up and the number of clicks is displayed in an alert.
How to get events using on event handler attribute
The on event handler attribute is an attribute written directly on an HTML element, and the function specified as the attribute value is executed when the specified event occurs .
Use the following format.
<element name on event name=”function name”></element name>
- Element name: Specify the element to get the event.
- Event name: Specify the type of event to retrieve. For example, click, mouseover, keydown, etc.
- Function name: Specify the function to execute when the event occurs.
For example, to get a click event, write as follows.
<button onclick="console.log('クリックされました')">クリック</button>In the above example, when the button element is clicked, the string “Clicked” will be output to the console.
However, this method lacks flexibility when acquiring multiple events or registering multiple event listeners, so it addEventListeneris recommended to use methods whenever possible.
The on event handler attribute is often used in beginner JavaScript because it allows you to easily retrieve events. However, when using the on event handler attribute, there is a problem in that maintainability decreases because HTML and JavaScript code will be mixed.
The on event handler attribute allows for easy retrieval of events, but it is not as flexible as the addEventListener method because it does not allow multiple functions to be specified and is not as flexible as the addEventListener method.
Sample program for how to obtain events using the on event handler attribute
In this example, when you click the button, the number of times it is clicked is counted up and an alert is displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of how to get an event using the on event handler attribute</title>
</head>
<body>
<button id="myButton" onclick="countUp()">click</button>
<script>
// Variable to count the number of clicks
let count = 0;
// Function executed when clicked
function countUp() {
count++;
alert(`Clicked Number of clicks: ${count}`);
}
</script>
</body>
</html>In this example, the onclick attribute is used to retrieve the click event. onclick attribute is the name of the function to be executed. In the function, the number of clicks is counted up and the number of clicks is displayed in an alert.
summary
We explained how to acquire events and execute processing using the addEventListener method and on event handler.
- Events can be retrieved using JavaScript using the addEventListener method and the on event handler attribute.
- When using the addEventListener method, multiple events can be acquired at the same time.
- When using the on event handler attribute, multiple functions cannot be executed at the same time.
I see, you can retrieve events using addEventListner and the on event handler attribute.
onEvent handler attributes allow you to easily retrieve events, but you cannot specify multiple functions and they addEventListenerare less flexible than methods, so addEventListeneruse methods whenever possible.
Comments