JavaScript Events

An event occurs when something happens in a browser window. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. HTML or DOM events are widely used in JavaScript code.

The JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events which can trigger JavaScript Code. The HTML allows event handler attributes, with JavaScript code to be added to HTML elements.
  <element event="Javascript code to execute">
Lets see the below example :

Example 1 :
<!DOCTYPE html>
<html>
<head>
  <script>
    function sayHello() {
      document.getElementById("demo1").innerText = "Hello world, This is test String.";
    }
  </script>
</head>
<body>
  <input type="button" onclick="sayHello()" value="Click Here"/>
  <p id="demo1"></p>
</body>
</html>
Output :



At above in HTML button control the onclick() event is used to change the text of <p>. Whenever the user clicks on the button then HTML element will call the JavaScript function sayHello() and the function will change the text of <p> element.

Example 2 :
<!DOCTYPE html>
<html>
<head>
  <script>
    function On() {
      document.getElementById("bulb_image").src = "on.gif";
      document.getElementById("demo2").innerText = "Light is ON"; 
    }
   
    function Off() {
      document.getElementById("bulb_image").src = "off.gif";
      document.getElementById("demo2").innerText = "Light is Off";  
    }
  </script>
</head>
<body>
  <img id="bulb_image" onmouseover="On()" onmouseout="Off()" src="off.gif" width="90" height="150">
  <p id="demo2">Light is Off</p>
  <h4>Move mouse cursor to turn light On/Off<h4>
</body>
</html>
Output :


Light is Off
Move mouse cursor to turn light On/Off

At the above example when the user moves mouse cursor on the light then the onmouseover() event occurs, which calls the JavaScript function On() and when cursor goes outside of the light then onmouseout event occurs, and calls the JavaScript function Off().

HTML Standard event Handlers :

Events Description
onblur occurs when form looses the focus from an element.
onclick occurs when element is clicked.
ondblclick occurs when element is double-clicked.
ondrag Triggers when an element is dragged
ondrop Triggers when dragged element is being dropped
onerror An error occurred loading an element
onfocus occurs when an element gets focus such as button, input, textarea etc.
onkeydown occurs when key is being pressed.
onkeypress occurs when user presses the key.
onkeyup occurs when key is released.
onload occurs when document, object or frameset is loaded.
onmouseover occurs when mouse is moved over an element.
onmouseout occurs when mouse is moved out from an element (after moved over).
onmousedown occurs when mouse button is pressed over an element.
onmouseup occurs when mouse is released from an element (after mouse is pressed).
onmousewheel Triggers when the mouse wheel is being rotated
onoffline Triggers when the document goes offline
ononline Triggers when the document comes online
onseeked Triggers when a media element's seeking attribute is no longer true, and the seeking has ended.
onseeking Triggers when a media element's seeking attribute is true, and the seeking has begun.
onsubmit occurs when form is submitted.
onresized occurs when document is resized.
onreset occurs when form is reset.
onselect Text within the element was selected
onscroll occurs when document is scrolled.
onunload occurs when body or frameset is unloaded.

Next Topic :