RAMAKAYAL COMPUTER EDUCATION

Event handling in the DOM with JavaScript

Written by

Saravana Kumar

in

1. What are Events?

  • Events are actions or occurrences that happen in the system you are programming, which the system can detect and act upon.
  • Examples include clicks, mouse movements, keypresses, and page loads.

2. Event Handlers

  • Event handlers are functions that get called when events occur.

3. Adding Event Handlers

  • addEventListener(): This method is used to register an event handler on a DOM element.
  var element = document.getElementById('myButton');
  element.addEventListener('click', myFunction);
  • Inline Event Handlers: You can also attach event handlers directly to HTML elements.
  <button onclick="myFunction()">Click me</button>

4. Event Object

  • Event Object: When an event occurs, the browser creates an event object containing information about the event.
  • This object is passed as an argument to the event handler function.

5. Event Types

  • There are many types of events, including:
  • Mouse Events: click, mouseover, mouseout, mousemove, etc.
  • Keyboard Events: keydown, keypress, keyup.
  • Form Events: submit, change, focus, blur.
  • Document and Window Events: load, resize, scroll, etc.

6. Basic Example

<!DOCTYPE html>
<html>
<head>
  <title>Event Handling</title>
</head>
<body>
  <button id="myButton">Click me</button>
  <script>
    // Define the event handler function
    function handleClick(event) {
      alert('Button clicked!');
    }

    // Get the button element
    var button = document.getElementById('myButton');

    // Attach event listener to the button
    button.addEventListener('click', handleClick);
  </script>
</body>
</html>

7. Removing Event Handlers

  • removeEventListener(): Removes an event listener from an element.
  element.removeEventListener('click', myFunction);

8. Example

Step 1: HTML Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling</title>
</head>
<body>
    <button id="myButton">Click me</button>
    <div id="output"></div>
    <script src="script.js"></script>
</body>
</html>

Step 2: JavaScript Code (script.js)

// Accessing DOM elements
const button = document.getElementById('myButton');
const output = document.getElementById('output');

// Event handler function
function handleClick() {
    output.textContent = 'Button clicked!';
}

// Adding event listener to the button
button.addEventListener('click', handleClick);

Explanation:

  1. HTML Markup: We have a simple HTML file with a button element and a div element to display the output. We include a JavaScript file (script.js) where our event handling logic resides.
  2. JavaScript Code:
  • We first access the DOM elements we need: the button with id myButton and the output div with id output.
  • We define an event handler function handleClick() that changes the text content of the output div to ‘Button clicked!’.
  • We use addEventListener() to attach a click event listener to the button. When the button is clicked, it will execute the handleClick() function.

Output:

When you click the button labeled “Click me”, the text inside the output div will change to “Button clicked!”.

Additional Example: Event Parameter

Let’s enhance our example to display the coordinates of the click when the button is clicked.

// Updated event handler function
function handleClick(event) {
    const x = event.clientX;
    const y = event.clientY;
    output.textContent = `Button clicked at (${x}, ${y})`;
}

Now, when you click the button, the output will show the coordinates of the click within the browser window.

Output:

If you click the button at different positions on the webpage, the output will show the coordinates of the click.

These examples illustrate the basic concept of event handling in the DOM using JavaScript, along with a slightly more advanced example of handling event parameters.

9. Understanding Event Flow

  • Event flow refers to the sequence in which events are handled on a webpage.
  • Events can propagate in two ways:
  • Event Bubbling: Events start from the target element and move up the DOM hierarchy to the root.
  • Event Capturing: Events start from the root and move down to the target element.

10. Event Phases

  • Event Capturing Phase: The event travels from the root to the target element.
  • Target Phase: The event reaches the target element.
  • Event Bubbling Phase: The event travels from the target element back up to the root.

11. Using addEventListener() with Event Phases

  • The third parameter of addEventListener() can control the event phase.
  element.addEventListener(eventType, handlerFunction, useCapture);
  • By default, useCapture is set to false, which means the event will be handled during the bubbling phase.
  • To handle events during the capturing phase, set useCapture to true.

12. Stopping Event Propagation

  • stopPropagation(): Prevents further propagation of the current event in the capturing and bubbling phases.
  event.stopPropagation();

13. Event Delegation Revisited

  • Event delegation can take advantage of event bubbling.
  • Instead of attaching event listeners to individual elements, you attach a single event listener to a parent element.
  • Events will bubble up from the target element to the parent element, where you can handle them.
  • This is particularly useful for dynamically added elements.

14. Event Object Properties

  • The event object passed to the event handler contains useful properties and methods:
  • event.target: Refers to the element that triggered the event.
  • event.currentTarget: Refers to the element that the event handler is attached to.
  • event.preventDefault(): Prevents the default behavior of the event.
  • event.stopPropagation(): Stops the propagation of the event.

15. Practical Examples

Example 1: Event Delegation

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  var list = document.getElementById('myList');
  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert('Item clicked: ' + event.target.innerText);
    }
  });
</script>

Example 2: Stopping Event Propagation

<button id="outer">Outer Button</button>
<button id="inner">Inner Button</button>

<script>
  var outer = document.getElementById('outer');
  var inner = document.getElementById('inner');

  outer.addEventListener('click', function(event) {
    alert('Outer button clicked!');
    event.stopPropagation(); // Stops event propagation
  });

  inner.addEventListener('click', function(event) {
    alert('Inner button clicked!');
  });
</script>

In this example, we’ll create a simple drawing application where users can draw on a canvas element by clicking and dragging the mouse.

Step 1: HTML Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing Application</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

Step 2: JavaScript Code (script.js)

// Accessing the canvas element
const canvas = document.getElementById('drawingCanvas');
const context = canvas.getContext('2d');

// Flag to track if the mouse button is pressed
let isDrawing = false;

// Function to start drawing
function startDrawing(event) {
    isDrawing = true;
    draw(event);
}

// Function to draw on canvas
function draw(event) {
    if (!isDrawing) return;

    const x = event.clientX - canvas.offsetLeft;
    const y = event.clientY - canvas.offsetTop;

    context.lineTo(x, y);
    context.stroke();
}

// Function to stop drawing
function stopDrawing() {
    isDrawing = false;
    context.beginPath();
}

// Event listeners for mouse events
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Explanation:

  1. HTML Markup: We have a canvas element where users can draw. We include a JavaScript file (script.js) where our drawing logic resides.
  2. JavaScript Code:
  • We access the canvas element and its 2D rendering context.
  • We define functions to handle starting drawing (startDrawing), drawing (draw), and stopping drawing (stopDrawing).
  • In startDrawing, we set isDrawing to true to indicate that drawing has started, and call the draw function.
  • In draw, we draw lines on the canvas as the user moves the mouse, using the mouse coordinates relative to the canvas.
  • In stopDrawing, we set isDrawing to false to indicate that drawing has stopped, and start a new path for the next drawing operation.
  • We add event listeners to the canvas for mouse events: mousedown to start drawing, mousemove to draw, mouseup and mouseout to stop drawing.

Output:

Users can draw on the canvas by clicking and dragging the mouse. The drawn lines will follow the movement of the mouse cursor within the canvas area.

This example demonstrates more advanced event handling in the context of a drawing application, where event parameters such as mouse coordinates are utilized to enable drawing functionality.

Conclusion

Understanding event handling depth allows you to control how events are handled on your webpage efficiently. By mastering event flow, phases, and event object properties, you can create more interactive and responsive web applications. Practice using these concepts in different scenarios to become more proficient in event handling.

Comments

Leave a Reply

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

More posts