JavaScript | Events

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.
Code #1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before clicking “click me event” key-

After clicking “click me event” key-

2) onkeyup event: This event is a keyboard event and executes instructions whenever a key is released after pressing.
Code #2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before written of “gfg”-

After written of “gfg”-

3) onmouseover event: This event corresponds to hovering the mouse pointer over the element and its children, to which it is bound to.
Code #3:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before mouse is taken over green square-

Green square gets disappear after mouse is taken over it.
4) onmouseout event: Whenever the mouse cursor leaves the element which handles a mouseout event, a function associated with it is executed.
Code #4:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before mouse is taken over the green square-

Green square will disappear after mouse is taken over it and removed after some time.
5) onchange event: This event detects the change in value of any element listing to this event.
Code #5:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before any key is pressed-

After 2 key is pressed-

6) onload event: When an element is loaded completely, this event is evoked.
Code #6:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html>
  <head></head>
  <body>
    <img onload="alert('Image completely loaded')"
      alt="GFG-Logo"
  </body>
</html>

chevron_right


Output:


7) onfocus event: An element listing to this event executes instructions whenever it recieves focus.
Code #7:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before mouse is clicked inside of the box-

After mouse is clicked inside of the box-

8) onblur event: This event is evoked when an element loses focus.
Code #8:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before “gfg” is entered inside of the box-

After “gfg” is entered inside of the box and pressed enter-

PS: onmouseup event listens to left and middle mouse click, but onmousedown event listens to left, middle, and right mouse clicks whereas onclick only handles left click.



My Personal Notes arrow_drop_up

A computer science student interested in coding cybersecurity gaming and science

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.