Events in JavaScript
HTML DOM (Document Object Model) events are actions or occurrences that happen in a web page and can be detected by JavaScript code.
These events can be user-initiated, such as clicking a button or hovering over an element, or they can be triggered by the browser or the document itself, such as when the page finishes loading.
First let's look at some of the most common HTML DOM events that you can use in your web pages.
onclick:
- occurs when an element is clickedonmouseover:
- occurs when the mouse cursor is over an elementonmouseout:
- occurs when the mouse cursor leaves an elementonkeydown:
- occurs when a key is pressed downonkeyup:
- occurs when a key is releasedonload:
- occurs when the document finishes loadingonunload:
- occurs when the user leaves the page
To use these events, you can add event listeners to HTML elements using JavaScript code.
As an example:
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("Button clicked!");
};
</script>
In this example:
- This code adds an
onclick
event listener to the button element with the ID"myButton"
. - When the button is clicked, the JavaScript function inside the event listener is executed, which displays an alert dialog box saying
"Button clicked!"
.
The click
Event
The click
event is an HTML DOM event that is triggered when an element is clicked.
It is used to create interactive user interfaces and provide visual feedback to the user.
You can add a click event listener to an HTML element using JavaScript.
As an example:
Editor
In this example:
- We have an HTML document that contains a button element with the ID
"myButton"
and a span element with the ID"count"
. - We also have a script element that adds a
click
event listener to the button element. - When the button is clicked, the function inside the event listener is executed, which increments a count variable and updates the
innerHTML
of the span element with the new count value.
The onmouseover
Event
The onmouseover
event is an HTML DOM event that is triggered when the mouse cursor moves over an element.
onmouseover
used to create interactive user interfaces and provide visual feedback to the user.
As an example:
Editor
In this example:
- We have a div element with the class
"myDiv"
. - We also have a script element that adds an
onmouseover
event listener to thediv
element. - When the mouse cursor moves over the
div
element, the function inside the event listener is executed, which logs a message to the console. - We use CSS to change the background color of the
div
element when the mouse cursor hovers over it.
The onmouseout
Event
The onmouseout
event is an HTML DOM event that is triggered when the mouse cursor moves out of an element.
It is the counterpart to the onmouseover event and is commonly used to create interactive user interfaces and provide visual feedback to the user.
As an example:
Editor
In this example:
- We have a
div
element with the class"myDiv"
. - We also have a script element that adds an
onmouseout
event listener to thediv
element. - When the mouse cursor moves out of the div element, the function inside the event listener is executed, which logs a message to the console.
- We use CSS to change the background color of the
div
element when the mouse cursor hovers over it.