JavaScript Events: Elevating User Interaction on the Web

Generally, an event can be defined as something that happens or occurs. However, JavaScript events are things that happen to HTML elements to which JavaScript is allowed to react to. An example of these events include;

• When a button is clicked
• When a form is submitted
• When a page loads etc…

More often than not, when events happen, we want something to happen as well and in this case, we use JavaScript to react or perform a particular task when that event occurs.

In JavaScript, we have various types of events these include; onclick, onload, onchange, onmouseover, onmouseout, onkeydown, onkeyup. However, understanding how one event functions will let you undestand how the others function.

1. The onclick event

This event for example is attached to clickable html elements e.g buttons. With the use of the onclick event, you can attach JavaScript code you intend to be executed once clicking occurs. Let us demonstrate

<button onclick="click()"  id="btn"> Click Me </button>

var btn = document.getElementById('btn')
btn.addEventListener("click", ()=>{
    alert("This button was clicked")
})

What we did here was that, in our html file, we attached the onclick event to our button element. We also gave the button element an id as well(which is optional because you can still use the .querySelector). While in our .js file, we created a variable wherein we called the particular html element we attached your event handler to and in this case it is a button element and we are using the .getElementById to call it. Later on, we created a function which allows us to pass in code we expect to be executed once your button is clicked. Also, don’t forget to pass your functionName inside of your event.

Let us run this and see what happens

Before button is clicked

After button is clicked

From the first image above, once the page loads, all we see is our plain button which says “click me” and when this button is clicked, it performs the task found in our function, which is to alert the user that the button has been clicked. This can be seen on image two.

From this simple example I believe that one can start to perceive the importance and use cases of events.

2. The onload event

This event allows you to perform or execute a task once an html page loads. Take for example, we want to welcome a user to our html page where we’ll be learning about JavaScript events. The code for this will be

window.onload = function(){
    alert('Welcome to a new JavaScript concept! Here you will be learning about events');
}

Once the page loads, we get this

Therefore the onload event allows you perform any task to a page once that page loads. Notice how we didn’t need to attach an event to any html element right??? This is because we used a property of the window object. Window objects or functions attached to them are executed once the entire webpage has been loaded into the browser window.

All the other events such as; onmouseover, onmouseout, onkeydown and onkeyup, they all use the same syntax as the onclick event.

This syntax entails one to add the event and the function you want to be executed once that event occurs to your html element. You can as well add an id if you wish. For example;

<div onmouseover="function()" id=""></div>

Follow for more