Categories
JavaScript Web development

JavaScript HTML DOM/Events

HTML DOM allows JavaScript to react to HTML events.

JavaScript HTML DOM Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:

onclick=JavaScript

Examples of HTML events:

  1. When a user clicks the mouse
  2. When a web page has loaded
  3. When an image has been loaded
  4. When the mouse moves over an element
  5. When an input field is changed
  6. When an HTML form is submitted
  7. When a user strokes a key

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

<!DOCTYPE html>
<html>
<body>

<h3 onclick="this.innerHTML='Ooops!'">Click on this text!</h3>

</body>
</html>

Output:

Click on this text!


HTML Event Attributes

To assign events to HTML elements you can use event attributes.

Assign an onclick event to a button element:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

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

<script>
function displayDate() {
  document.getElementById("ex-1").innerHTML = Date();
}
</script>

<p id="ex-1"></p>

</body>
</html> 

Output:

Click the button to display the date.


Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript:

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

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

<p id="ex-2"></p>

<script>
document.getElementById("button").onclick = displayDate;

function displayDate() {
  document.getElementById("ex-2").innerHTML = Date();
}
</script>

</body>
</html> 

Output:

Click “Try it” to execute the displayDate() function.


The onload and onunload Events

The onload and onunload events are triggered when the user enters or leaves the page.

The onload event can be used to check the visitor’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 cookies.

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p id="ex-3"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("ex-3").innerHTML = text;
}
</script>

</body>
</html> 

Output:

JavaScript HTML DOM/Events

The onchange Event

The onchange event is often used in combination with the validation of input fields.

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

<!DOCTYPE html>
<html>
<head>
<script>
function onChange() {
  var x = document.getElementById("first-name");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

Enter your name: <input type="text" id="first-name" onchange="onChange()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

</body>
</html>

Output:

Enter your name:

When you leave the input field, a function is triggered which transforms the input text to upper case.


The onmouseover and onmouseout Events

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

<!DOCTYPE html>
<html>
<body>

<div onmouseover="moveOver(this)" onmouseout="mOut(this)" 
style="background-color:#2a9d8f;width:200px;height:40px;padding:30px;font-size:20px">
Mouse Over Me</div>

<script>
function moveOver(obj) {
  obj.innerHTML = "Thank You"
}

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

</body>
</html> 

Output:

Mouse Over Me

The onmousedown, onmouseup and onclick Events

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)"
style="background-color:yellow;width:200px;height:20px;padding:40px;">
Click Me</div>

<script>
function mouseDown(obj) {
  obj.style.backgroundColor = "#f4a261";
  obj.innerHTML = "Release Me";
}

function mouseUp(obj) {
  obj.style.backgroundColor="#e76f51";
  obj.innerHTML="Thank You";
}
</script>

</body>
</html> 

Output:

Click Me

Enjoy coding!