Events are actions that can be detected by JavaScript.
Example
Mouse Over Me
Click Me
Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onclick event of a button element to indicate that a function will run when a user clicks on the button.
Examples of events:
- Clicking a button (or any other HTML element)
- A page is finished loading
- An image is finished loading
- Moving the mouse-cursor over an element
- Entering an input field
- Submitting a form
- A keystroke
To see all events recognized by JavaScript, go to our Complete Event Reference.
Events are normally used in combination with functions.
HTML Event Attributes
To assign events to HTML elements you can use the event attributes.
For a complete list of all available event attributes, go to our Complete Event Reference.
Example
Assign an onclick event to a button element:
<button id="myBtn" onclick="displayDate()">Try it</button>
Try it yourself »
In the example above, a function named displayDate will be executed when the button is clicked.
Assign Events Using the HTML DOM
You can assign events to HTML elements within a script or a function:
Example
Assign an onclick event to a button element:
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
Try it yourself »
In the example above, a function named displayDate will be executed when the button is clicked.
onload and onunload
The onload and onunload events are triggered when the user enters or leaves the page.
The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
The onload and onunload events can be used to deal with cookies.
onfocus, onblur and onchange
The onfocus, onblur and onchange events are often used in combination with validation of form fields.
Below is an example of how to use the onchange event. The checkEmail() function will be called
whenever the user changes the content of the field:
<input type="text" onchange="checkEmail()" />
onsubmit
The onsubmit event can be used to validate form fields before submitting it.
Below is an example of how to use the onsubmit event. The checkForm() function will be called when
the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled.
<form method="post" action="mySubmit.asp" onsubmit="checkForm()">
onmouseover, onmouseout
The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element.
onmousedown, onmouseup and onclick
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.
