JavaScript Events

What is an Event ?

JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that clicks to is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

Developers can use these events to execute JavaScript-coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events that can trigger JavaScript Code.

Please go through this small tutorial for a better understanding of HTML Event Reference. Here we will see a few examples to understand a relation between Event and JavaScript −

Event

Following table describes the Event Handlers used in the JavaScript :

S.No.EventWhen it occurs
1.onabortIt occurs when the user aborts the page or media file loading.
2.onblurIt occurs when the user leaves an HTML object.
3.onchangeIt occurs when the user changes or updates the value of an object.
4.onclickIt occurs or triggers when any user clicks on an HTML element.
5.ondblclickIt occurs when the user clicks on an HTML element two times together.
6.onfocusIt occurs when the user focuses on an HTML element. This event handler works opposite to onblur.
7.onkeydownIt triggers when a user is pressing a key on a keyboard device. This event handler works for all the keys.
8.onkeypressIt triggers when the users press a key on a keyboard. This event handler is not triggered for all the keys.
9.onkeyupIt occurs when a user released a key from a keyboard after pressing on an object or element.
10.onloadIt occurs when an object is completely loaded.
11.onmousedownIt occurs when a user presses the button of a mouse over an HTML element.
12.onmousemoveIt occurs when a user moves the cursor on an HTML object.
13.onmouseoverIt occurs when a user moves the cursor over an HTML object.
14.onmouseoutIt occurs or triggers when the mouse pointer is moved out of an HTML element.
15.onmouseupIt occurs or triggers when the mouse button is released over an HTML element.
16.onresetIt is used by the user to reset the form.
17.onselectIt occurs after selecting the content or text on a web page.
18.onsubmitIt is triggered when the user clicks a button after the submission of a form.
19.onunloadIt is triggered when the user closes a web page.

Javascript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model(DOM). These events by default use bubbling propagation i.e, upwards in the DOM from children to parent. We can bind events either as inline or in an external script.

There are some JavaScript events:

1) onclick events: 

This is a mouse event and provokes any logic defined if the user clicks on the element it is bound to.

<!doctype html>
<html>
  <head>
    <script>
      function hiThere() {
        alert('Hi there!');
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="hiThere()">Click me event</button>
  </body>
</html>

2) onkeyup event: 

This event is a keyboard event and executes instructions whenever a key is released after pressing.

<!doctype html>
<html>
  <head>
    <script>
      var a = 0;
      var b = 0;
      var c = 0;
      function changeBackground() {
        var x = document.getElementById('bg');
        bg.style.backgroundColor = 'rgb('+a+', '+b+', '+c+')';
        a += 1;
        b += a + 1;
        c += b + 1;
        if (a > 255) a = a - b;
        if (b > 255) b = a;
        if (c > 255) c = b;
      }
    </script>
  </head>
  <body>
    <input id="bg" onkeyup="changeBackground()"
      placeholder="write something" style="color:#fff">
  </body>
</html>

3) onmouseover event: 

This event corresponds to hovering the mouse pointer over the element and its children, to which it is bound to.

<!doctype html>
<html>
  <head>
    <script>
       function hov() {
         var e = document.getElementById('hover');
         e.style.display = 'none';
      }
    </script>
  </head>
  <body>
    <div id="hover" onmouseover="hov()"
      style="background-color:green;height:200px;width:200px;">
    </div>
  </body>
</html>

4) onmouseout event: 

Whenever the mouse cursor leaves the element which handles a mouseout event, a function associated with it is executed.

<!doctype html>
<html>
  <head>
    <script>
      function out() {
        var e = document.getElementById('hover');
        e.style.display = 'none';
      }
    </script>
  </head>
  <body>
    <div id="hover" onmouseout="out()"
      style="background-color:green;height:200px;width:200px;">
    </div>
  </body>
</html>

5) onchange event: 

This event detects the change in value of any element listing to this event.

<!doctype html>
<html>
  <head></head>
  <body>
    <input onchange="alert(this.value)" type="number">
  </body>
</html>

6) onload event: 

When an element is loaded completely, this event is evoked.

<!doctype html>
<html>
  <head></head>
  <body>
    <img onload="alert('Image completely loaded')"
      alt="GFG-Logo"
      src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png">
  </body>
</html>

7) onfocus event: 

An element listing to this event executes instructions whenever it recieves focus.

<!doctype html>
<!doctype html>
<html>
  <head>
    <script>
      function focused() {
        var e = document.getElementById('inp');
        if (confirm('Got it?')) {
          e.blur();
        }
      }
    </script>
  </head>
  <body>
    <p >Take the focus into the input box below:</p>
    <input id="inp" onfocus="focused()">
  </body>
</html>

8) onblur event: 

This event is evoked when an element loses focus.

<!doctype html>
<html>
  <head></head>
  <body>
    <p>Write something in the input box and then click elsewhere
       in the document body.</p>
    <input onblur="alert(this.value)">
  </body>
</html>