Introduction to JS Browser Events for Web Designers

For many years, websites have been becoming increasingly interactive. A good website is measured by how dynamically it reacts to the actions of a user. We are often more attracted by interactive web pages than static ones, which contain only words and images. As the Internet is becoming increasingly widespread, online presence is becoming essential for almost all kinds of businesses. A well-website leaves a positive impression on users. How to design an interactive and dynamic web page is a serious concern for any web designer. For the past few years, JavaScript has gained popularity in this regard. Now many JS libraries and frameworks are being used for fast and robust website design and development.

In this article, we will go through some basics of adding interactivity to a webpage using JavaScript. A new web designer or anyone wanting to revise the basics of JS browser events will find this article helpful.

Browser Events

What is a browser event in JS? We add interactivity to a web page by writing scripts. But how do these scripts run? And when do they run? The answer is when a specific event happens. In simple words, we want the web page to behave in a particular manner when a user performs some action. The action of a user triggers the event. For example, a mouse click by the user. At the mouse click event, we may wish to show a message. The 'listeners' in JS are 'listening' to such events. When a specific event occurs, the listener runs a particular script. The JS script may contain a function or anything a user wants to happen on an event, or an action by the user.

Sometimes, the events are not triggered by the user’s actions. They may happen on some stages of a web page rendering. We may want to run a script when the Document Object Model (DOM) loads. We can place an event listener to run a script on the web page load event.

Using JS browser events, we can easily add interactive functionality to HTML objects on a webpage. It makes a simple HTML web page more dynamic and appealing to a user. Next, let’s look at some of the common browser events and their implementations.

Mouseover/Mouseout Event

Mouseover event happens when a user moves the mouse over a specific object. Mouseout is when the mouse has moved away from that specific object. When a mouse moves from one element to another, one becomes a target and the other the related target. Let’s see the following example. What happens when we move a mouse over the image?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:gray;}
#div1 {

background-image:url('https://images.pexels.com/photos/922337/pexels-photo922337.jpeg?cs=srgb&dl=pexels-steve-johnson-922337.jpg&fm=jpg');
background-repeat:no-repeat;
background-size:contain;
height:500px;width:5200px;
position: relative;
}
#div2 {
background-image: url('https://images.pexels.com/photos/97082/weimaraner-puppy- dog-snout-97082.jpeg?cs=srgb&dl=pexels-pixabay-97082.jpg&fm=jpg');
background-repeat:no-repeat;
background-size:contain;
height:500px;width:400px;
position: absolute;
top: 40px;
left: 320px;
}
</style>
</head>
<body>
<div id="div1" onmouseover="document.getElementById('div2').style.display = 'block';" onmouseout="document.getElementById('div2').style.display = 'none';">
</div>
<div id="div2" style="display: none;">
</div>
</body>
</html>

In the above example, we have placed a mouseover and mouseout event on one of our div elements. On these events, we are displaying another image and making it disappear, respectively. In this example, we have not explicitly called a script to run in case of an event. Let’s try such an example next.

DOMContentLoaded Event

This event happens when the DOM of a web page is fully loaded. We know that a webpage contains HTML, CSS, scripts, etc. When the HTML of a web page builds, it means the DOM is loaded. Images, videos may take some more time to load and display. If we want to trigger an event when the HTML structure is available, we can use a DOMContentLoaded event. Also, note the user's action does not handle this event.

In this example, we have added an event listener to the DOM Content Loaded Event. When the DOM content loads, the script runs and changes the label text to ‘Done’ from ‘Want Food’. Notice, the change occurs before the image is fully loaded.

Click Event

This event happens with a mouse click or a tap on a touchpad. The following example demonstrates how to select an HTML element and bind it with a click event.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:gray;}
#div2 {
background-image: url('https://images.pexels.com/photos/97082/weimaraner-puppy- dog-snout-97082.jpeg?cs=srgb&dl=pexels-pixabay-97082.jpg&fm=jpg');
background-repeat:no-repeat;
background-size:contain;
height:500px;width:400px;
position: absolute;
top: 40px;
left: 320px;
}
#div3 {
background-image: url('https://images.pexels.com/photos/57627/pexels-photo-57627.jpeg?cs=srgb&dl=pexels-adrianna-calvo-57627.jpg&fm=jpg');
background-repeat:no-repeat;
background-size:contain;
height:500px;width:400px;
position: absolute;
top: 40px;
left: 720px;
}
button {
padding: 1em 1.2em;
background: #eb7ba0;
color: black;
font-size: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="btn">Click me</button>
<script type="text/javascript">
const my_button = document.getElementById('btn')
function alertPop() {
alert('Loading more dogs..');
document.getElementById('div2').style.display = 'block'
document.getElementById('div3').style.display = 'block'
} my_button.addEventListener("click", alertPop, false);
</script>
<div id="div2" style="display: none;"> </div>
<div id="div3" style="display: none;"> </div>
</body>
</html>

In this example, we bind a button element to a click event. When the button is clicked script runs and calls a function that throws a message and displays some images.

Focus and Blur Events

This event is used to highlight a user’s particular action. A very simple example is to highlight an input field. It leaves a nice visual experience when the user wants to enter some information.

<html>
<form id="form">
<input id="name" type="text" placeholder="username">
<input id="pswd" type="password" placeholder="password">
</form>
<script>
const pswd = document.getElementById('pswd');
pswd.addEventListener('focus', (e) => {
e.target.style.backgroundColor = 'lightgray';
});
pswd.addEventListener('blur', (e) => {
e.target.style.backgroundColor = '';
});
</script>
</body>
</html>

This example turns the input field for the password to light gray on ‘focus'. The field turns white again or ‘blurs’ when the user clicks somewhere else.

Wrap Up

We discussed some basic browser events related to mouse, forms, documents, etc. Using these events and their listeners, we can design a visually appealing and interactive web page. The documentation for JS events is very extensive. This article sets us in the right direction, and using the documentation as a reference we can further polish our web designing skills.