How to add an event handler to the specified element in JavaScript?

Events in HTML are “things” that take place using HTML elements. JavaScript can “respond” to these events when used in HTML pages.

Events are produced as a result of user interaction with the elements of the user interface. The actions that trigger an event include, for instance, pressing a button, moving the mouse, typing a character on the keyboard, choosing an item from a list, and scrolling the page.

Examples of HTML events are mentioned below −

  • An HTML web page has finished loading
  • An HTML input field was changed
  • An HTML button was clicked

Adding an event handler

These events are something that user or browser does. HTML elements can have event handler properties added to them using JavaScript code. Following is a syntax for this −

<element event = ‘ JavaScript – code ’>
<element event = “ JavaScript – code ”>

Example 1

Basic Button

In this example below, we implemented onclick event on button, and date object is passed into innerHTML. Thus if we click the button it will show the date and time in paragraph, as we passed the id of the paragraph tag into onclick event.

<!DOCTYPE html>
<html>
<body>
   <button onclick="document.getElementById('dummy').innerHTML=Date()">The Time right now is: </button>
   <p id="dummy"></p>
</body>
</html>

Example 2

Using HTML DOM property

In this example, We using HTML DOM property to adding an event. When the user hits the button, the onclick event attribute gets to work. The script starts when the element is clicked with the mouse.

<!doctype html>
<html>
<head>
   <script>
      function Tutorialspoint() {
         alert('Welcome Tutorialspoint!');
      }
   </script>
</head>
<body>
   <button type="button" onclick="Tutorialspoint()"> Click! </button>
</body>
</html>

Example 3

Adding two events on input field

In this example, Using addEventListener, we added two keypress events to a text field (). The first keypress event will happen when you try to enter text using the keyboard inside the text field. And then the second keypress will happen after first keypress.

<!DOCTYPE html>
<html>
<body>
   <input id="input">
   <script>
      var a = document.getElementById("input");
      a.addEventListener("keypress", firstFunction);
      a.addEventListener("keypress", secondFunction);
      function firstFunction() {
         alert ("Keypress happened inside the text-box!");
      }
      function secondFunction() {
         alert ("Welcome to TutorialsPoint!");
      }
   </script>
</body>
</html>

The first keypress event occurs when you press a keyboard key to type something into the input field.

The second keypress event will occur after hitting the OK button in the alert box.

Example 4

Changing CSS of HTML element

In this example, a "keypress" event is attached to an input element using the addEventListener() method. In the function we made it to change the color by using style.backgroundColor. If user enter any key in the input field, it will change it’s color.

<!DOCTYPE html>
<html>
<body>
   <p>Do try to type something in the text-box below and it will change it's color</p>
   <input type="text" id="example">
   <script>
      document.getElementById("example").addEventListener("keypress", func);
      function func() {
         document.getElementById("example").style.backgroundColor = "green";
      }
   </script>
</body>
</html>

After typing some key in the field, it leads to color change.

Example 5

Adding event listener to a text box

In the following example, we are going to discuss how to add an event handler to the text box. In this case, we will use a text-field and add an event listener to it, so that it will display the content when mouseover it.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add an event handler</title>
   <div id="clk">Hello, Alice</div>
   <input type="text" value="mouseover here" id="txt" />
</head>
<body>
   <script>
      document.getElementById("txt").addEventListener("mouseover", function () {
         document.getElementById("clk").innerHTML =
            "Tutorix is the best e-learning platform.";
      });
   </script>
</body>
</html>

Example 6

Following is another example of adding event to a button −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add an event handler</title>
   <div id="clk">Hello, Alice</div>
   <input type="button" value="mouseout here" id="btn" />
</head>
<body>
   <script>
      document.getElementById("btn").addEventListener("mouseout", function () {
         document.getElementById("clk").innerHTML =
            "Tutorix is the best e-learning platform.";
      });
   </script>
</body>
</html>

Updated on: 19-Sep-2022

258 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements