These are the different types of events:
- onclick (when the mouse clicks an HTML element)
- onmouseover (when the mouse hovers over an HTML element)
- onmouseout (when the mouse leaves an HTML element)
- onkeydown (when a key on the keyboard is pressed)
- onload (when the page has finished loading)
- onchange (when an HTML element on the page has changed)
In this example, we will add a button and display an alert message when events occur (clicking on the button or hovering the mouse over a button). We will also display an alert when the page loads.
Watch the video below and scroll down for the sample code.
Sample HTML code:
<html> <head> <title>Events</title> <script src="script.js"></script> </head> <body onload="alert('Hello there!');"> <button onclick="alert('You clicked me!');">Click me</button> <button onmouseover="alert('You hovered.');">Hover over me</button> </body> </html>
Next tutorial: Functions