JavaScript händelser

HTML-händelser är något som händer på HTML-element.

När JavaScript används på en HTML-sida kan JavaScript "hantera" dessa händelser.

HTML-händelse

HTML-händelser kan vara något som webbläsaren eller användaren gör.

Nedan är några exempel på HTML-händelser:

  • HTML-webbsidan laddas klart
  • HTML-inmatningsfältet ändras
  • HTML-knappen klickas

Vanligtvis, när en händelse inträffar, vill användaren göra något.

JavaScript låter dig köra kod när en händelse upptäcks.

Genom JavaScript-kod，HTML tillåter dig att lägga till händelsehanterare till HTML-element.

använd enkel citationstecken:

<element event='några JavaScript>

använd dubbel citationstecken:

<element event="några JavaScript">

I följande exempel,onclick egenskaper (och kod) läggs till i <button> Element:

Exempel

<button onclick='document.getElementById("demo").innerHTML=Date()'>Vad är den nuvarande tiden?</button>

Prova själv

I föregående exempel, JavaScript-koden ändrade innehållet på elementet med id="demo".

I nästa exempel, kod (använder this.innerHTML）ändrade sitt egna elementets innehåll:

Exempel

<button onclick="this.innerHTML=Date()">Vad är den nuvarande tiden?</button>

Prova själv

JavaScript-kod har ofta många rader. Det är vanligare att anropa funktioner via händelseegenskaper:

Exempel

<button onclick="displayDate()">Vad är den nuvarande tiden?</button>

Prova själv

Vanliga HTML-händelser

Nedan är några vanliga HTML-händelser:

händelse beskrivning
onchange HTML-elementen har ändrats
onclick The user clicked the HTML element
onmouseover When the user moves the mouse over the HTML element
onmouseout When the user moves the mouse away from the HTML element
onkeydown When the user presses a keyboard key
onload The browser has completed the page load

A more complete list:CodeW3C.com JavaScript reference manual HTML DOM events.

What can JavaScript do?

Event handlers can be used to handle, validate user input, user actions, and browser actions:

  • What should be done every time the page is loaded
  • What should be done when the page is closed
  • The action that should be executed when the user clicks the button
  • The content that should be validated when the user enters data
  • etc.

There are many different ways to let JavaScript handle events:

  • HTML event properties can execute JavaScript code
  • HTML event properties can call JavaScript functions
  • You can assign your own event handler to HTML elements
  • You can prevent events from being sent or handled
  • etc.

You will learn more about events and event handlers in the HTML DOM chapter.