How to Handle JavaScript Events in HTML ?

Last Updated : 12 Aug, 2021

An Event is an action or occurrence recognized by the software. It can be triggered by the user or the system. Mostly Events are used on buttons, hyperlinks, hovers, page loading, etc. All this stuff gets into action(processed) with the help of event handlers.

In this article, you will learn about different types of HTML event handler attributes. Basically, to handle events in HTML, you just need to add the function in the HTML tag which is going to be executed in JavaScript when any event in HTML is fired or triggered. There are many event attributes in HTML like keyboard event, mouse event, form event, etc. which are discussed briefly.

Syntax:

Handle event in HTML :

<element onclick="myScript">

Various HTML event attributes:

Form Event

onblur: This event occurs when an object loses focus.
```
<element onblur="myScript">
```
onchange: This event occurs when the value of an element has been changed.
```
<element onchange="myScript">
```
onfocus: This event occurs when element get focus.
```
<element onfocus="myScript">
```

Example 1: When the user selects the button from the select tag, onchange() event is fired and then OnChangeFunction() is called which is present in JavaScript. So an event handler defined in the HTML can call a function defined in a script

HTML

<!DOCTYPE html> <html>  <body>     <center>         <h1 style="color: green;">             GeeksforGeeks         </h1>          <input type="text" name="blur" id="blur"              onblur="BlurFunction()"              placeholder="Enter Name" />         <br /><br />          <select id="course" onchange="OnChangeFunction()">             <option value="Competitive Programming">                 Competitive Programming             </option>              <option value="Operating System">                 Operating System             </option>              <option value="Web Development">                 Web Development             </option>              <option value="Android Development">                 Android Development             </option>         </select>          <p id="demo"></p>         <br /><br />          <input type="text" id="focus"              onfocus="FocusFunction(this.id)"                  placeholder="Enter Your Semester" /><br />     </center>      <script>         function BlurFunction() {             let x = document.getElementById("blur");             x.value = x.value.toUpperCase();         }          function OnChangeFunction() {             let x = document.getElementById("course").value;             document.getElementById("demo")                 .innerHTML = "You selected: " + x;         }          function FocusFunction(x) {             document.getElementById(x)                 .style.background = "green";         }     </script> </body>  </html>

Output:

Event

onclick: This event occurs when user clicks on an element.

<element onclick="myScript">

onmouseover: This event occurs when user hover mouse pointer over an element.

<element onmouseover="myScript">

Example 2:

HTML

<!DOCTYPE html> <html>  <body>     <center>         <h1 style="color: green;">             GeeksforGeeks         </h1>                  <button onclick="OnClickFunction()">             Click me         </button>                  <p id="demo"></p>         <br /><br />          <p onmouseover="MouseHover()">             Hover Mouse Here         </p>     </center>      <script>         function OnClickFunction() {             document.getElementById("demo")                 .innerHTML = "GeeksforGeeks";         }          function MouseHover() {             alert("Mouse move over");         }     </script> </body>  </html>

Output:

In above output, 'Click Me' button calls the OnClickFunction() function when it is clicked. The OnClickFunction() is a function defined in a separate <script> element.

Disadvantages of using HTML event handler attributes:

Assigning event handlers using HTML event handler attributes are considered a bad practice.
The event handler code is mixed with the HTML code, which will make the code more difficult to maintain and extend.
There is a problem with timing, as if the element is loaded fully before the JavaScript code, users can start interacting with the element on the webpage which will cause an error.

How to trigger events in JavaScript ?

aksrathod07

Improve

Article Tags :

How to Handle JavaScript Events in HTML ?

Similar Reads