JavaScript Events

HTML occasions are "things" that happen to HTML elements.

When JavaScript is utilized in HTML pages, JavaScript can "react" on these events.

HTML Events

An HTML occasion can be something the program does, or something a client does.

Here are a few instances of HTML events:

  • An HTML site page has completed loading
  • An HTML input field was changed
  • An HTML catch was clicked

Often, when occasions occur, you might need to do something.

JavaScript gives you a chance to execute code when occasions are detected.

HTML permits occasion handler traits, with JavaScript code, to be added to HTML elements.

With single quotes:

<some-HTML-element some-event='some JavaScript'>

With twofold quotes:

<some-HTML-element some-event="some JavaScript">

In the accompanying precedent, an onclick trait (with code), is added to a catch element:


<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
Try it Yourself »

In the precedent over, the JavaScript code changes the substance of the component with id="demo".

In the following precedent, the code changes the substance of its own component (utilizing this.innerHTML):


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


<button onclick="displayDate()">The time is?</button>
Try it Yourself »

Common HTML Events

Here is a rundown of some regular HTML events:

Event Description
onchange An HTML component has been changed
onclick The client clicks a HTML element
onmouseover The client moves the mouse over a HTML element
onmouseout The client moves the mouse far from a HTML element
onkeydown The client pushes a console key
onload The program has wrapped up the page

What can JavaScript Do?

Event handlers can be utilized to deal with, and confirm, client input, client activities, also, program actions:

  • Things that ought to be done each time a page loads
  • Things that ought to be done when the page is closed
  • Action that ought to be performed when a client clicks a button
  • Content that ought to be confirmed when a client inputs data
  • And more ...

Many distinctive strategies can be utilized to let JavaScript work with events:

  • HTML occasion properties can execute JavaScript code directly
  • HTML occasion properties can call JavaScript functions
  • You can allocate your own occasion handler capacities to HTML elements
  • You can keep occasions from being sent or being handled
  • And more ...