postImage

Tutorial: Javascript Events

blogImage

By Emmanuel Chinonso

Web Developer

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.

Contrast Bootstrap UI Kit

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:

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

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

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

Common HTML Events

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

EventDescription
onchangeAn HTML element has been changed
--------------------------
onclickThe user clicks an HTML element
--------------------------
onmouseoverThe user moves the mouse over an HTML element
--------------------------
onmouseoutThe user moves the mouse away from an HTML element
--------------------------
onkeydownThe user pushes a keyboard key
--------------------------
onloadThe browser has finished loading the page

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.

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

...