EVENTS IN JAVASCRIPT

Hello again! Like always, my name is Gustavo Assis and I'm a Computer Engineering student. I'm writing these articles to help you and me learn about JS.
Events are one of the most important things in JavaScript, because they allow us to use our script to control the page. A list of the events is given ahead:

1. Mouse Events:

click → When the element is clicked.

dblclick → Double click.

mousedown → Mouse button is pressed.

mouseup → Mouse button is released.

mousemove → Mouse moves over the element.

mouseover → Mouse enters the element area.

mouseout → Mouse leaves the element area.

contextmenu → Right-click (context menu).

2. Keyboard Events:

keydown → When a key is pressed.

keypress → When a key is pressed and held (deprecated in some browsers).

keyup → When a key is released.

3. Form Events:

submit → When a form is submitted.

reset → When a form is reset.

focus → When a field gains focus.

blur → When a field loses focus.

change → When the value of a field changes.

input → When the value of a field changes (in real time).

4. Window and Document Events:

load → When the page or a resource finishes loading.

DOMContentLoaded → When the HTML is loaded and parsed

resize → When the browser window is resized.

scroll → When the page or an element is scrolled.

unload → When the user leaves the page.

5. Drag & Drop Events:

dragstart → When dragging starts.

drag → While dragging.

dragend → When dragging ends.

dragenter → When entering a drop target area.

dragover → While over a drop target.

dragleave → When leaving a drop target area.

drop → When an element is dropped in a target area.

6. Touch Events (Mobile)

touchstart → When a finger touches the screen.

touchmove → When a finger moves on the screen.

touchend → When a finger is lifted.

touchcancel → When a touch is interrupted.

Now, we will see some examples of how to use them.
Let's suppose that in the body of our HTML we have a button onclick. We want the button to call a function in our script when it is pressed to handle the event. We will name the function "clickEvent", so in our HTML we have:

<button onclick = "clickEvent()">Click here</button>

In our script, we can handle the click:

function clickEvent() {
   alert("Hello World");
   // We can do many other things here.
}

Now, let's see an example where we change the style of an element. In our HTML:

<!-- A blue box in the center of the image-->
<div id = "box" 
     onmouseover = "onmouseoverEvent()" 
     style = "margin: auto; width: 60%; height: 150px; background: blue;">
</div>

In our JavaScript, let's change the color of the background:

function onmouseoverEvent() {
   let div = document.getElementById("box");
   div.style.backgroundColor = "red";
}

Now, when we pass the mouse over the blue box, it becomes red. The box will remain red when the mouse leaves the box, because we only handle when the mouse enters the box, and not when it leaves. So, let's handle when the mouse leaves the box (the box has to become blue again), to do that, we will use the "onmouseout" event, now our HTML becomes:

<div id="box" 
     onmouseover = "onmouseoverEvent()" 
     onmouseout = "onmouseoutEvent()" 
     style="margin: auto; width: 60%; height: 150px; background: blue;">
</div>

And our JavaScript:

function onmouseoverEvent() {
   let div = document.getElementById("box");
   div.style.backgroundColor = "red";
}

function onmouseoutEvent() {
   let div = document.getElementById("box");
   div.style.backgroundColor = "blue";
}

Now, the box turns red when the mouse enters it, and blue when the mouse leaves.
My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX