Skip to content

Event handling in JavaScript

  • by

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:

Event handling in JavaScript

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:

EventDescription
clickOccurs when an element is clicked by the user.
mouseoverFires when the mouse pointer is moved over an element.
mouseoutFires when the mouse pointer is moved out of an element.
keydownTriggered when a key on the keyboard is pressed down.
keyupOccurs when a key on the keyboard is released.
submitFired when a form is submitted, typically by clicking a submit button.
focusOccurs when an element gains focus, such as when a user clicks or tabs into an input field.
blurFired when an element loses focus, such as when a user clicks or tabs out of an input field.
loadFired when a webpage or an external resource finishes loading.
resizeTriggered when the browser window is resized.
scrollOccurs when the content of an element is scrolled.
changeFired when the value of a form element changes.
mouseenterFires when the mouse pointer enters an element.
mouseleaveOccurs 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

Leave a Reply

Your email address will not be published. Required fields are marked *