In JavaScript, events are actions or occurrences that happen in the browser as a result of user interactions or system-generated triggers. JavaScript provides a way to respond to these events by attaching event handlers, which are functions that are executed when a specific event occurs.
Types of Events:
User Events:
- These events are triggered by user interactions with the browser, such as clicking a button, typing into a form field, hovering over an element, or resizing the window.
System Events:
- These events are triggered by the browser or operating system, such as the page loading, the document being ready, the window being resized, or a timer expiring.
// Adding a click event handler to a button element
document.getElementById("myButton").
addEventListener("click", function(event) {
alert("Button clicked!");
});
Key Concepts:
Event Listener:
- An event listener is a function that is attached to an element to listen for a specific type of event. It is executed when the event occurs.
Event Object:
- When an event is triggered, an event object containing information about the event (e.g., type, target element) is passed to the event handler function.
Event Propagation:
- Events in the DOM propagate through a hierarchy of elements, from the target element to its ancestors (capturing phase) and then back down to the target element (bubbling phase).
Event Types:
- There are many types of events in JavaScript, including mouse events (click, mouseover, mouseout), keyboard events (keydown, keyup), form events (submit, change), and more.
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
document.getElementById("parent")
.addEventListener("click", function(event) {
console.log("Parent clicked!");
});
document.getElementById("child")
.addEventListener("click", function(event) {
console.log("Child clicked!");
});
</script>
Output:
- When clicking the button, both “Parent clicked!” and “Child clicked!” are logged to the console because the click event propagates from the button (child) to its parent element (parent).
Benefits of Using Events:
Interactivity:
- Events enable dynamic and interactive user experiences by allowing JavaScript to respond to user actions in real-time.
Asynchronicity:
- Events support asynchronous programming by providing a way to execute code in response to external triggers or system events without blocking the main thread.
Modularity:
- Events promote modularity and separation of concerns by allowing developers to attach event handlers to specific elements or components, keeping the code organized and maintainable.
Mouse events:
| Event Performed | Event Handler | Description |
|---|---|---|
| click | onclick | When mouse click on an element |
| mouseover | onmouseover | When the cursor of the mouse comes over the element |
| mouseout | onmouseout | When the cursor of the mouse leaves an element |
| mousedown | onmousedown | When the mouse button is pressed over the element |
| mouseup | onmouseup | When the mouse button is released over the element |
| mousemove | onmousemove | When the mouse movement takes place. |
