JavaScript Events

The "things" that happen to HTML components are known as HTML events. JavaScript can "respond" to these events when it is used in HTML pages.

HTML Events An HTML event can be initiated by the browser or initiated by the user. Here are some HTML event examples:

• The loading of an HTML web page is complete.
• A HTML input area has been modified.
• An HTML button has been pressed.

When circumstances occur, you may feel compelled to act. When events are identified, JavaScript allows you to run code. HTML permits event handler attributes to be added to HTML elements using JavaScript code.

JavaScript Code:

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

An onclick property is applied to a <button> element in the following example (with code). The content of the element with id="demo" is likewise changed by the JavaScript code.

The following code (using this.innerHTML) modifies the content of its own element:

JavaScript Code:

<button onclick="this.innerHTML = Date()">The time is?</button>

The code in JavaScript is frequently many lines long. The following are examples of event characteristics that call functions:

JavaScript Code:

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

Common HTML Events

Here's a rundown of some of the most commonly occurring HTML events:

What can JavaScript Do?

User input, user actions, and browser activities can all be handled and verified by event handlers:

• Things that should be done when a website loads
• Things that should be done when a page is closed
• Actions that should be performed when a user clicks a button
• Content that should be verified when a user enters data
• And more...

There are several methods for allowing JavaScript to work with events:

• HTML event attributes can call JavaScript functions
• HTML event properties can run JavaScript code directly.
• You can add your own event handler functions to HTML elements
• You can stop events from being sent or handled
• And much more...

The HTML DOM chapters cover a lot more information about events and event handlers.

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.