DOM 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 examples :

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
blur The event occurs when an element loses focus
click The event occurs when the user clicks on an element
copy The event occurs when the user copies the content of an element
cut The event occurs when the user cuts the content of an element
dblclick The event occurs when the user double-clicks on an element
drag The event occurs when an element is being dragged
drop The event occurs when the dragged element is dropped on the drop target
error The event occurs when an error occurs while loading an external file
focus The event occurs when an element gets focus
input The event occurs when an element gets user input
invalid The event occurs when an element is invalid
keydown The event occurs when the user is pressing a key
keypress The event occurs when the user presses a key
keyup The event occurs when the user releases a key
load The event occurs when an object has loaded
loadstart The event occurs when the browser starts looking for the specified media
message The event occurs when a message is received through the event source
mousedown The event occurs when the user presses a mouse button over an element
mouseenter The event occurs when the pointer is moved onto an element
mouseleave The event occurs when the pointer is moved out of an element
mousemove The event occurs when the pointer is moving while it is over an element
mouseover The event occurs when the pointer is moved onto an element, or onto one of its children
mousedown The event occurs when the user presses a mouse button over an element
mouseup The event occurs when a user releases a mouse button over an element
offline The event occurs when the browser starts to work offline
online The event occurs when the browser starts to work online
open The event occurs when a connection with the event source is opened
pagehide The event occurs when the user navigates away from a webpage
pageshow The event occurs when the user navigates to a webpage
paste The event occurs when the user pastes some content in an element
resize The event occurs when the document view is resized
reset The event occurs when a form is reset
scroll The event occurs when an element's scrollbar is being scrolled
search The event occurs when the user writes something in a search field (for <input="search">)
seeked The event occurs when the user is finished moving/skipping to a new position in the media
seeking The event occurs when the user starts moving/skipping to a new position in the media
select The event occurs after the user selects some text (for <input> and <textarea>)
show The event occurs when a <menu> element is shown as a context menu
submit The event occurs when a form is submitted
unload The event occurs once a page has unloaded (for <body>)
wheel The event occurs when the mouse wheel rolls up or down over an element


Next Topic :