DOM Events

HTML DOM events allows JavaScript to take action to HTML events:


Reacting to Events

When a user clicks on an HTML element an event happens to execute JavaScript.

When a user clicks on an element then event will happen and that time add JavaScript code to an HTML event attribute:

onclick=JavaScript

Examples of HTML events:

  • User clicks the mouse
  • Web page has loaded
  • An image has been loaded
  • The mouse moves over an element
  • An input field is changed
  • An HTML form is submitted
  • A user strokes a key

In the below example, the content of the <p> element is changed when a user clicks on it:

Input:-
<!DOCTYPE html>
<html>
<body>

<p onclick="this.innerHTML='New Content!'">Click to change text!</p>

</body>
</html>

Output (Before Click):-

Output (After Click):-

In this example, a function is called from the event handler:

Input:-
<!DOCTYPE html>
<html>
<body>

<p onclick="changeContent(this)">Click to change text!</p>

<script>
function changeContent(id) {
  id.innerHTML = "New Content!";
}
</script>

</body>
</html>

Output (Before Click):-

Output (After Click):-


HTML Event Attributes

You can use event attributes to assign events to HTML elements.

Input:-
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the current date and time.</p>

<button onclick="displayDateTime()">The current time is?</button>

<script>
function displayDateTime() {
  document.getElementById("result").innerHTML = Date();
}
</script>

<p id="result"></p>

</body>
</html>

Output (Before Click):-

Output (After Click):-


Assign Events Using the HTML DOM

The HTML DOM allows user to assign or give events to HTML elements using JavaScript:

In the example above, a function named displayDateTime is assigned to an HTML element with the id="myButton".

The function will be executed when the button is clicked.

Input:-
<!DOCTYPE html>
<html>
<body>

<p>Click here to execute the displayDateTime() function.</p>

<button id="myButton">Try it</button>

<p id="result"></p>

<script>
document.getElementById("myButton").onclick = displayDateTime;

function displayDateTime() {
  document.getElementById("result").innerHTML = Date();
}
</script>

</body>
</html>

Output (Before Click):-

Output (After Click):-


The onload and onunload Events

The onload and onunload events will be triggered when the user enters or leaves the current page.

The onload event can be used to check the user’s browser type and browser version, and load the proper version of the web page based on the information.

The onload and onunload events can be used to deal with the cookies also.

Input:-
<!DOCTYPE html>
<html>
<body onload="checkIfCookies()">

<p id="result"></p>

<script>
function checkIfCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are active.";
  } else {
    text = "Cookies are not active.";
  }
  document.getElementById("result").innerHTML = text;
}
</script>

</body>
</html>

Output :-


Onchange Event

The onchange event is generally used with validation of input fields.

Below is the example to use the onchange. The upperCase() function will be happened when a user changes the content of an input field.

Input:-
<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
  var a = document.getElementById("name");
  a.value = a.value.toUpperCase();
}
</script>
</head>
<body>

Enter your name: <input type="text" id="name" onchange="myFunc()">

<p>When you click outside the input field, a function will be triggered which coverts the input text to upper case.</p>

</body>
</html>

Output (Before Click):-

Output (After Click outside the input text):-


onmouseover and onmouseout Events

The onmouseover and onmouseout events will be used to trigger a function when the user mouses over, or out of, an HTML element:

Input:-
<!DOCTYPE html>
<html>
<body>

<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" 
style="background-color:red;width:100px;height:20px;padding:50px;">
Mouse Over Me</div>

<script>
function mouseOver(obj) {
  obj.innerHTML = "I am in."
}

function mouseOut(obj) {
  obj.innerHTML = "Mouse Over Me"
}
</script>

</body>
</html>

Output (Before mouser over):-

Output (After mouse over):-


onmousedown, onmouseup and onclick Events

The onmousedownonmouseup, and onclick events are all related to a mouse-click. First when a mouse-button is clicked, the onmousedown event will be triggered, then, when the mouse-button is released, the onmouseup event will be triggered, finally, when the mouse-click is completed, the onclick event will be triggered.

Input:-
<!DOCTYPE html>
<html>
<body>

<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)"
style="background-color:grey;width:100px;height:100px;padding:30px;">
Click Here</div>

<script>
function mouseDown(obj) {
  obj.style.backgroundColor = "red";
  obj.innerHTML = "Mouse key pressed";
}

function mouseUp(obj) {
  obj.style.backgroundColor="green";
  obj.innerHTML="Mouse key released";
}
</script>

</body>
</html>

Output (No action):-

Output (Mouse key pressed):-

Output (Mouse key released):-