By Emmanuel Chinonso
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.
1 <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
An onclick property is applied to a
The following code (using this.innerHTML) modifies the content of its own element:
1 <button onclick="this.innerHTML = Date()">The time is?</button>
1 <button onclick="displayDate()">The time is?</button>.
Common HTML Events
Here's a rundown of some of the most commonly occurring HTML events:
|onchange||An HTML element has been changed|
|onclick||The user clicks an HTML element|
|onmouseover||The user moves the mouse over an HTML element|
|onmouseout||The user moves the mouse away from an HTML element|
|onkeydown||The user pushes a keyboard key|
|onload||The browser has finished loading the page|
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...
- 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.
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
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