Introduction to JS Browser Events for Web Designers

Faiza Khalid
26.06.2021
|
1148
some basics of adding interactivity to a webpage using JavaScript.

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.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {background-color:gray;}
        #div2 {
  background-image: url('https://images.pexels.com/photos/933498/pexels-photo-933498.jpeg?cs=srgb&dl=pexels-kasuma-933498.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="div2">
    <label id="lbl">Want Food!
    </label>
    <script>
document.addEventListener('DOMContentLoaded', () => {
let lbl = document.getElementById('lbl');
lbl.innerHTML = "Done";
});
    </script>
  </div>
</body>
</html>

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.

More stories

css box model examples
Building Blocks of CSS – The Box Model

Use the CSS box model to design the placement and flow of elements in relation to one another on a webpage.

Read more
Building Blocks of CSS – CSS Selectors
Building Blocks of CSS – CSS Selectors

How to make your webpage stand out by successfully utilizing various CSS selectors

Read more
CSS or Cascade Sheet Styling in website designing
Building Blocks of CSS-Inheritance, Cascading, and Specificity

Define some of the initial concepts and building blocks of CSS. Understanding these basic concepts of CSS are fundamental for understanding more complex concepts in web designing.

Read more
translation of MATLAB algorithms to C++ via the MEX-function
From MATLAB to C/C++ Part 1

Look at some of the benefits and disadvantages of using MATLAB, the difference between a compiler and interpreter and how to use a MEX-function within the MATLAB environment to automatically translate algorithms.

Read more
Creating Applications Using Flutter For iOS and Android
Creating Multi-Functional Hybrid Applications Using Flutter For iOS and Android

If you have an app for your business, you must know how difficult it can be to keep your iOS and Android apps consistent and up-to-date with each other. We think Flutter will revolutionize the app in the maintenance process.

Read more
Dijkstra Algorithm  In Python
Shortest Paths Dijkstra Algorithm In Python

Find insight about methods that would reduce costs, save time and energy in many aspects of lives.

Read more

Algo uses cookies for personalization and other purposes. Learn more about cookies use. Algo supports the Digital Advertising Alliance principles. By interacting with this site, you agree to our use of cookies.