Skip to main content

Events in JS

Events are actions or occurrences that happen in the browser, such as user interactions like clicking a button, moving the mouse, or pressing a key. Changes in the document like the document finishing loading or interactions with elements on a web page like submitting a form or resizing a window are also considered as events.

Events in javascript

Click Events​

  • onclick()
  • ondblclick()

Key Events​

  • onkeypress()
  • onkeydown()
  • onkeyup()

Mouse Events​

  • onmouseover()
  • onmousemove()
  • onmouseout()
  • onmouseup()

General Events​

  • onload()
  • onchange()

onclick​

The onclick event in Javascript occurs when the user clicks on an element.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>onclick</title>
  </head>

  <body>
    <button onclick="console.log('Button1')">Button one</button>

    <button onclick="console.log('Button2')">Button Two</button>
  </body>
</html>

Output :

screenshot1

Example explanation :

In the above example, we have created two button Button One and Button two. When clicked a button one triggers a JavaScript console.log function with the message Button1. Similarly, when clicked a button two triggers a Javascript console function with the message Button2. This is a simple way to provide feedback to the user when they interact with the button.

onchange​

The onchange event in JavaScript is triggered when the value of an element or form element is changed by the user.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>onchange</title>
  </head>

  <body>
    <input type="text" onchange="change()" />
    <script>
      function change() {
        console.log("change");
      }
    </script>
  </body>
</html>

Output :

screenshot2

Example explanation :

In the above example, we create a input box. when user enters the value of input in the input box the onchange event trigger.

onkeypress​

The onkeypress event is triggered when a user presses a key on the keyboard.

onkeydown​

The onkeydown event is activated when a key on the keyboard is pressed down.

onkeyup​

The keyup event is triggered when a key on the keyboard is released after being pressed.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>onkeypress onkeydown onkeyup</title>
  </head>

  <body>
    <input
      type="text"
      onkeypress="keyPress()"
      onkeydown="keyDown()"
      onkeyup="keyUp()"
    />
    <script>
      function keyPress() {
        console.log("keyPress()");
      }

      function keyDown() {
        console.log("keyDown()");
      }

      function keyUp() {
        console.log("keyUp()");
      }
    </script>
  </body>
</html>

Output :

screenshot3

onmouseover​

The onmouseover event occurs when the pointer is moved onto an element.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>onmouseover</title>
  </head>
  <body>
    <img src="pizza.png" onmouseover="imageOver()" />

    <script>
      function imageOver() {
        console.log("Image Over");
      }
    </script>
  </body>
</html>

Output :

screenshot9

Example explanation :

When a user hovers their mouse over the input box, an console will appear saying over. However, this message is a show since the code will only trigger when the mouse is hovered over the input box, not when it's actually clicked.

onmouseout​

The onmouseoutevent in JavaScript is triggered when the mouse pointer moves out of an element.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>onmouseout</title>
  </head>
  <body>
    <img src="pizza.png" onmouseout="imageOut()" />

    <script>
      function imageOut() {
        console.log("Image Out");
      }
    </script>
  </body>
</html>

Output :

screenshot10

Example explanation :

In the above example, When a user leave their mouse out the input box, an console will appear saying onmouse out event occurs. However, this message is a show since the code will only trigger when the mouse is leave from the input box, not when it's actually clicked.

onmousemove​

The onmousemove event is triggered when the mouse pointer moves over an HTML element and generates a continuous stream of events as the mouse moves.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>onmouseout</title>
  </head>

  <body>
    <img src="/pizza.png" onmousemove="imageOver()" />
    <script>
      function imageOver() {
        const number = Math.random();
        console.log(`Image Over: ${number}`);
      }
    </script>
  </body>
</html>

Output :

screenshot7

Example explanation :

In the above example, when you hover the mouse pointer over this image, it triggers the onmousemove event. The imageOver() function, a random number between 0 and 1 is generated using Math.random(), and a message is logged to the console.

onmouseup​

The onmouseup event triggers when the mouse button is released after clicking on the image. When the user clicks and releases the mouse over the image, the function imageClickRelease() logs a random number to the console.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>onmouseup</title>
  </head>

  <body>
    <img src="/pizza.png" onmouseup="imageClickRelease()" />
    <script>
      function imageClickRelease() {
        const number = Math.random();
        console.log(`Mouse Released: ${number}`);
      }
    </script>
  </body>
</html>

Output :

screenshot7

Example explanation :

In the following example, when you release the mouse button over the image, it triggers the onmouseup event. The imageClickRelease() function generates a random number between 0 and 1 using Math.random(), and a message is logged to the console.

ondblclick​

The ondblclick event is triggered when a user double-clicks on an HTML element.

For example :

<!DOCTYPE html>
<html>
  <head>
    <title>ondblclick</title>
  </head>

  <body>
    <img src="/pizza.png" ondblclick="dbl()" />
    <script>
      function dbl() {
        alert("Awesome");
      }
    </script>
  </body>
</html>

Output :

screenshot8

Example explanation :

In the above example, when you load the web page in a browser, the image "/pizza.png" is displayed. if you double-click on the image, the ondblclick event is triggered. The dbl() function, an alert dialog open with the message Awesome is displayed.