logo

TechCodeview

JavaScript-händelser

Förändringen i ett objekts tillstånd kallas en Händelse . I html finns det olika händelser som representerar att någon aktivitet utförs av användaren eller av webbläsaren. När javascript kod ingår i HTML , js reagerar över dessa händelser och tillåter exekvering. Denna process att reagera över händelserna kallas Eventhantering . Således hanterar js HTML-händelserna via Eventhanterare .

Till exempel , när en användare klickar över webbläsaren, lägg till js-kod, som kommer att utföra uppgiften som ska utföras på händelsen.

Några av HTML-händelserna och deras händelsehanterare är:

Mushändelser:

Händelse utförd Händelsehanterare Beskrivning
klick onclick När du klickar med musen på ett element
för muspekaren på musen över När muspekaren kommer över elementet
musen ut onmouseout När muspekaren lämnar ett element
mus ner onmousedown När musknappen trycks över elementet
musupp onmouseup När musknappen släpps över elementet
musen onmousemove När musrörelsen äger rum.

Tangentbordshändelser:

Händelse utförd Händelsehanterare Beskrivning
Keydown & Keyup onkeydown & onkeyup När användaren trycker på och sedan släpper knappen

Form händelser:

Händelse utförd Händelsehanterare Beskrivning
fokus fokus När användaren fokuserar på ett element
Skicka in skicka in När användaren skickar in formuläret
fläck på oskärpa När fokus är borta från ett formelement
förändra vid förändring När användaren ändrar eller ändrar värdet på ett formulärelement

Fönster/Dokumenthändelser

Händelse utförd Händelsehanterare Beskrivning
ladda ladda När webbläsaren är klar med inläsningen av sidan
lasta av på avlastning När besökaren lämnar den aktuella webbsidan laddar webbläsaren bort den
ändra storlek ändra storlek När besökaren ändrar storlek på webbläsarens fönster

Låt oss diskutera några exempel på händelser och deras hanterare.

Klicka på Händelse

 Javascript Events
Testa det nu

MouseOver-händelse

 <p onmouseover="mouseoverevent()"> Keep cursor over me</p>
Testa det nu

Fokus händelse

 Javascript Events <h2> Enter something here</h2>
Testa det nu

Keydown-händelse

 Javascript Events <h2> Enter something here</h2>
Testa det nu

Ladda händelse

 Javascript Events <br>
Testa det nu