Event handling in JavaScript refers to the process of responding to events triggered by user interactions or actions within a web page. Events can include actions like mouse clicks, keyboard input, form submissions, and more.
JavaScript provides several methods and techniques to handle events effectively. Here’s an overview of event handling in JavaScript:
1. Event Listeners: An event listener is a function that gets executed when a specific event occurs. You can attach event listeners to HTML elements to listen for specific events. The addEventListener method is used to register event listeners.
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
// Event handling code goes here
});
When the button is clicked, the specified function is executed.
2. Inline Event Handlers: You can assign JavaScript code to an element’s onclick, onkeydown, onsubmit, or other event attributes.
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
// Event handling code goes here
}
</script>
3. Event Object: When an event occurs, JavaScript automatically creates an event object and passes it as an argument to the event handler function. The event object contains information about the event, such as the target element, event type, and any additional data related to the event. You can access this object within the event handler function.
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log(event.target); // The element that triggered the event
console.log(event.type); // The type of event ('click' in this case)
});
4. Event Propagation: Events in JavaScript follow a concept called event propagation or event bubbling. When an event occurs on a nested element, such as a button inside a div, the event propagates through the DOM hierarchy from the innermost element to the outermost element unless explicitly stopped. This means that an event listener on the parent element can also detect the event. You can control the event propagation using methods like stopPropagation() or stopImmediatePropagation() on the event object.
Event handling in JavaScript examples
Simple example code that includes the button element and the JavaScript code for event handling:
<!DOCTYPE html>
<html>
<head>
<title>Event Handling Example</title>
<script>
// JavaScript code
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('myButton');
// Define the event handler function
function handleClick() {
// Change the button text
button.textContent = 'Button Clicked!';
}
// Attach the event listener to the button
button.addEventListener('click', handleClick);
});
</script>
</head>
<body>
<button id="myButton">Click me</button>
</body>
</html>
Output:
When you open this HTML file in a web browser, you will see a button labeled “Click me.” When you click the button, the event handler function (handleClick) will be triggered, and the button text will change to “Button Clicked!”
Common HTML Events
HTML provides a wide range of events that can be used to trigger JavaScript code or perform actions based on user interactions or other events. Here are some of the most commonly used HTML events:
| Event | Description |
|---|---|
| click | Occurs when an element is clicked by the user. |
| mouseover | Fires when the mouse pointer is moved over an element. |
| mouseout | Fires when the mouse pointer is moved out of an element. |
| keydown | Triggered when a key on the keyboard is pressed down. |
| keyup | Occurs when a key on the keyboard is released. |
| submit | Fired when a form is submitted, typically by clicking a submit button. |
| focus | Occurs when an element gains focus, such as when a user clicks or tabs into an input field. |
| blur | Fired when an element loses focus, such as when a user clicks or tabs out of an input field. |
| load | Fired when a webpage or an external resource finishes loading. |
| resize | Triggered when the browser window is resized. |
| scroll | Occurs when the content of an element is scrolled. |
| change | Fired when the value of a form element changes. |
| mouseenter | Fires when the mouse pointer enters an element. |
| mouseleave | Occurs when the mouse pointer leaves an element. |
Comment if you have any doubts or suggestions on this JS event handling tutorial.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version