UIDHTML | Free web and APP learning website | Course Details - JavaScript/Typescript features -touchend

JavaScript/Typescript - 16 Topics

Basic

Mouse Events

Mobile Gestures

String Methods

Array Methods

Object

Modern Javascript (ES6)

Inheritance

1. inheritance arrow_right

Encapsulation

1. Access modifiers and encapsulation arrow_right

Polymorphism

Design Patterns with Classes

Promise

Decorators

1. Deep dive into decorators arrow_right

Generics

1. Deep dive into generics arrow_right

Error Handling

DEEP DIVE INTO

JavaScript/Typescript

Topic:touchend

The touchend event in JavaScript is triggered when a touch point is removed from the touch surface of a touch-enabled device. This event is essential for handling the conclusion of a touch interaction, allowing you to respond to actions like lifting a finger from the screen. Here's a deep explanation of the touchend event:

Basic Usage:

The touchend event is used with the addEventListener method to specify a function that should be executed when a touch event ends. The basic syntax looks like this:

javascriptelement.addEventListener('touchend', function(event) {
  // Code to be executed when a touch ends
});

element: The HTML element to which you want to attach the event listener.
touchend: The event type to listen for.
event: The event object containing information about the touch interaction.

Event Object Properties:

The event object passed to the touchend event handler contains various properties that provide information about the touch interaction, such as:

touches: A list of all touch points currently in contact with the screen.
targetTouches: A list of touch points that are currently in contact with the target element that triggered the event.
changedTouches: A list of touch points that have changed since the last touch event.
clientX and clientY: The coordinates of the touch point relative to the viewport.
pageX and pageY: The coordinates of the touch point relative to the entire document.

Example:

Here's a basic example of how to use the touchend event to change the background color of an element when a touch interaction ends:

html<!DOCTYPE html>
<html>
<head>
  <title>Touchend Example</title>
</head>
<body>
  <div id="touchDiv" style="width: 200px; height: 200px; background-color: lightgray;"></div>

  <script>
    const touchDiv = document.getElementById('touchDiv');

    touchDiv.addEventListener('touchend', function(event) {
      event.preventDefault(); // Prevent the default touch behavior (e.g., scrolling)
      touchDiv.style.backgroundColor = 'lightgreen';
    });
  </script>
</body>
</html>

In this example, when a touch interaction ends on the touchDiv element, the background color changes to light green.

Common Use Cases:

Building Touch-Friendly Interfaces: The touchend event is essential for creating touch-friendly web applications as it allows you to capture user interactions and respond to the conclusion of a touch gesture.
Gesture Recognition: You can use touchend in conjunction with other touch events like touchstart and touchmove to recognize gestures, such as swipes, pinches, and taps.
Interactive Games and Apps: Mobile games and interactive applications often rely on touch events, including touchend, to handle user input and interactions.

Event Precautions:

As with other touch events, it's important to consider that different devices and browsers may handle touch interactions differently. Additionally, you may want to prevent the default touch behaviors when necessary to avoid unintended consequences, such as page scrolling.

In summary, the touchend event in JavaScript is a fundamental event for capturing the end of a touch interaction on a touch-enabled device. It's a crucial component in building touch-responsive web applications and allows you to create a wide range of touch-based user interfaces and interactions.