Eventos DOM in JavaScript
Events in JavaScript are triggered to notify changes of interest in the execution of the code or user interaction with the browser. In this post, we will see the most important events in JavaScript.
Event Handler: To react to browser events we need an event handler. To define this behavior, we need the addEventListener method on the element to which we will define the handler.
Click Event
This event is triggered when the mouse or touchpad is clicked on an element of the page.
<button>Click</button>With the following script, every time you click on the button, the button text will change to show the amount of clicks.
const button = document.querySelector('button');
button.addEventListener('click', event => {
button.textContent = `Click count: ${event.detail}`;
});I invite you to click the following button several times and wait a moment before clicking again. You'll see the count reset. This is a bit difficult to understand at first, but imagine you want to develop a kind of web file system, then you'll want to know when they click to select the element and when they click twice to open a folder, for example.
Mousemove Event
This event is triggered when the mouse is moved over an element.
<div id="mouse"></div>The following script shows the mouse position at each point in the container.
document.querySelector("#mouse").addEventListener("mousemove", event => {
event.target.textContent = `position: ${event.offsetX}x, ${event.offsetY}y`
});
Mousedown and Mouseup Events
These events correspond to when you click with the mouse. When you click with the mouse, two things happen: you press the main mouse button (mousedown), wait a bit and then release the pressure (mouseup).
<div id="mouse"></div>The following script shows the effect of clicking on the two mentioned events. Take your time to try it out and take a little time to click.
const element = document.querySelector("#mouse")
element.addEventListener("mousedown", event => {
element.classList.remove("unpressed")
element.classList.add("pressed")
})
element.addEventListener("mouseup", event => {
element.classList.remove("pressed")
element.classList.add("unpressed")
})
Using "this" in events
Let's go back a moment to the example of the click event.
const button = document.querySelector('button');
button.addEventListener('click', event => {
button.textContent = `Click count: ${event.detail}`;
});The issue with this code is that it does not allow us to use this within the arrow function. If you want to know a little more about this type of function and its behavior, I invite you to visit our post on Arrow functions in JavaScript.
Now, why would we use this in this case? The answer is that in this context, this refers to the element in question. To allow us to handle this, we must change the arrow function to a function declaration.
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
this.textContent = `Click count: ${event.detail}`;
});Using Additional Parameters in Events
By default, the anonymous function we pass as the second parameter of addEventListener automatically places the event (event) as the first parameter of the function. Suppose we want to add an additional parameter in the previous example to indicate some text in the button, the first thing we need to do is wrap the main function in an anonymous function like this:
const button = document.querySelector('button');
const counter = function(event) {
this.textContent = `Click count: ${event.detail}`;
}
button.addEventListener('click', function(event) {
counter(event)
});The issue with this code is that this no longer works because it is not in the same context. Let's make a little adjustment.
const button = document.querySelector('button');
const counter = function(event, button) {
button.textContent = `Click count: ${event.detail}`;
}
button.addEventListener('click', function(event) {
counter(event, this)
});Again, our code works, the next and last step is to add the parameter we want to our function.
const button = document.querySelector('button');
const counter = function(event, button, text) {
button.textContent = `${text} ${event.detail}`;
}
button.addEventListener('click', function(event) {
counter(event, this, 'Click count is:')
});