DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: Javascript Dom Events

#javascript #webdev #programming #codenewbie

JavaScript HTML DOM Events

JavaScript can respond to HTML events thanks to HTML DOM:

Reacting to Events

When an event occurs, such as when a user clicks on an HTML element, a JavaScript can be run. Add the following JavaScript code to an HTML event property to run code when a user clicks on an element: onclick=JavaScript

Examples of HTML events: -When a user clicks the mouse

  • When a web page loads
  • When a picture loads
  • When the mouse travels over an element
  • When an input field is modified
  • When an HTML form is submitted
  • When a user strokes a key

The content of this Code is altered when a user clicks on the <h1>element: The event handler calls a function in this code: HTML and JavaScript Code:

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

HTML and JavaScript Code:**

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTML Event Attributes: To assign events to HTML elements you can use event attributes. Assign an onclick event to a button element:

JavaScript Code:

<button onclick="displayDate()">Try it</button>
Enter fullscreen mode Exit fullscreen mode

In the code above, a function named displayDate will be executed when the button is clicked.

Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript: Assign an onclick event to a button element:

JavaScript Code:

<script>document.getElementById("myBtn").onclick = displayDate;</script>
Enter fullscreen mode Exit fullscreen mode

In the code above, a function named displayDate is assigned to an HTML element with the id="myBtn". The function is invoked when the button is pressed.

The onload and onunload Events The onload and onunload events are fired when a user enters or quits a page. The onload event can be used to determine the visitor's browser type and version, and then load the appropriate version of the web page based on that information. Cookies can be handled by using the onload and onunload events.

JavaScript Code:

<body onload="checkCookies()">
Enter fullscreen mode Exit fullscreen mode

The onchange Event

Input field validation and the onchange event are frequently used together. The onchange is demonstrated in the code below. When a user modifies the content of an input field, the upperCase() function will be called.

HTML code:

<input type="text" id="fname" onchange="upperCase()">
Enter fullscreen mode Exit fullscreen mode

The onmouseover and onmouseout Events

When a user mouses over or out of an HTML element, the onmouseover and onmouseout events can be used to call a function: Mouse Over Me

The onmousedown, onmouseup and onclick Events A mouse click is comprised of the onmousedown, onmouseup, and onclick events. The onmousedown event is triggered when a mouse-button is clicked, the onmouseup event is activated when the mouse-button is released, and the onclick event is triggered when the mouse-click is completed.

Contrast Bootstrap UI Kit

Resources

You may find the following resources useful:

Top comments (0)

Read next

gladiatorsbattle profile image

Building a Highly Reactive Page in React: A Deep Dive into Gladiator Crash

Gladiators Battle -

fahaddevs profile image

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Fahad Bin Faiz -

steve8708 profile image

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

Steve Sewell -

mikeyoung44 profile image

A beginner's guide to the Stable-Diffusion-V1-4 model by Compvis on Huggingface

Mike Young -