Javascript Dom Events

Windframe ResourcesBlog Contact

Tutorial: Javascript Dom Events

By Emmanuel Chinonso

Web Developer

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>
In this code, a function is called from the event handler:
HTML and JavaScript Code:**
```js
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>
</body>
</html>

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>

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>

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()">

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()">

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.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Javascript Scope

Javascript Events

Comments

...