JavaScript

JavaScript Code for Event Handling

Programmingempire

The following section demonstrates a JavaScript Code for Event Handling. Before discussing the code, let us understand, how the event handling is done in JavaScript.

Event Handling in JavaScript

As a result of the user’s actions, a variety of events may occur on a web page. While, it is necessary that some action should be done in response to those events, sometimes it becomes mandatory also. For instance, if a user knowingly performs an action that results in the occurrence of an event, the use seeks its response also. As can be seen, when the user clicks on a button, then he or she also waits for a certain response.

Additionally, event handling makes the web page responsive and dynamic. As a result, the user experience also improves and the page becomes more attractive.

Adding Event Handler Attributes to an HTML Element

In fact, HTML provides an easy way to remember the event handler attributes. Basically, we just need to add on as a prefix to the event name. For example, if the event name is mouseover, the corresponding event handler attribute is onmouseover. Apart from specifying the event handler attribute, we also need an event handler function that executes in response to the event. Certainly, we write that event handler function in JavaScript. The following code shows an example of the event handler.

Event Handler Functions in JavaScript

As an illustration, the following code shows how to add event handlers. As soon as the user clicks on the button, the function named myfunction() executes. Hence, users get an alert message when they click on the button.

<script>
   function myfunction()
   {
        alert('button clicked');
    }
</script>
<div>
   <button onclick="myfunction()">Click Me</button>
</div>

In fact, there are lots of event handler attributes that we can use with elements. Some of these attributes are ondblclick, onmouseover, onmouseleave, onkeyup, onleydown, onabort, onresize, and so on.

A Simple JavaScript Code for Event Handling

The following code shows how the event handlers work in JavaScript. As can be seen, the page contains a paragraph in a div element. At first, when the page is loaded initially, it shows the output as given in the first part of the image. Further, when the mouse pointer enters the paragraph and leaves it, the corresponding functions f1() and f2() execute respectively.

Additionally, the code also handles the double click event. Whenever a double click is recognized within the paragraph, the function f3() executes. As soon as any of the given events occur, the corresponding function first retrieves the paragraph using its id. After that, it adds a specific CSS class to the paragraph element. Also, it removes any of the previously added CSS classes. Hence, the following code also demonstrates how to add and remove a CSS class dynamically.

<html>
<head>
<title>Adding a CSS class</title>
<style>
  .a{
      border: purple 10px Outset;
      border-radius: 10px;
      margin: 20px;
      padding: 30px;
      text-align: center;
      width: 450px;
      font-size: 30px;
   }
   .b{
      border: green 7px solid;
      background-color: pink;
      margin: 10px;
      padding: 10px;
      text-align: left;
      width: 250px;
      font-size: 13px;
    }
   .c{
      border: red 5px inset;
      background-color: black;
      color: beige;
      margin: 40px;
      padding: 30px;
      text-align: right;
      width: 550px;
      font-size: 20px;
    }
</style>
<script>
   function f1()
   {
	let v=document.getElementById("p1");
        v.classList.add("a");
        v.classList.remove("b");
        v.classList.remove("c");
   }
   function f2()
   {
	let v=document.getElementById("p1");
        v.classList.add("b");
        v.classList.remove("a");
        v.classList.remove("c");
   }
   function f3()
   {
	let v=document.getElementById("p1");
        v.classList.add("c");
        v.classList.remove("a");
        v.classList.remove("b");
   }
</script>
</head>
   <div style="margin: 20px; padding: 30px;">
       <p id="p1" onmouseenter="f1()" onmouseleave="f2()" ondblclick="f3()">
          Demonstration of Event Handling in JavaScript....
       </p>
   </div>
<body>
</body>
</html>

Output

Demonstration of JavaScript Code for Event Handling
Demonstration of JavaScript Code for Event Handling

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Understanding Document Object Model (DOM) in JavaScript

Understanding JSON Web Tokens

Understanding HTTP Requests and Responses

What is Asynchronous JavaScript?

JavaScript Code for Event Handling

Callback Functions in JavaScript

Arrow Functions in JavaScript

JavaScript Code Examples

Show or Hide TextBox when Selection Changed in JavaScript

Changing Style of HTML Elements using getElementsByClassName() Method

Creating Classes in JavaScript

programmingempire

You may also like...