postImage

Tutorial: Javascript Dom Events

blogImage

By Emmanuel Chinonso

Web Developer

JavaScript HTML DOM Events

JavaScript can respond to HTML events thanks to HTML DOM:

Contrast Bootstrap UI Kit

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:

1<!DOCTYPE html>
2<html>
3<body>
4<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
5</body>
6</html>
7In this code, a function is called from the event handler:
8HTML and JavaScript Code:**
9```javascript
10<!DOCTYPE html>
11<html>
12<body>
13<h1 onclick="changeText(this)">Click on this text!</h1>
14<script>
15function changeText(id) {
16 id.innerHTML = "Ooops!";
17}
18</script>
19</body>
20</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:

1<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:

1<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:

1<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:

1<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.

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...