Pointer Events in Javascript DOM
Last Updated :
26 Jul, 2024
Pointer events are a set of DOM (Document Object Model) events that provide a unified way of handling inputs from a variety of devices, such as touchscreens, mouse, and pen/stylus. These events are supported by modern browsers and allow developers to write code that responds to user interactions with the page in a consistent and predictable way, regardless of the type of input device being used.
Some of the most commonly used pointer events include:
- pointerdown: The event fired when the user presses their pointer on an element
- pointerup: The event fired when the user releases their pointer from an element
- pointermove: The event fired when the user moves their pointer over an element
- pointerover: The event fired when the user moves their pointer over an element
- pointerout: The event fired when the user moves their pointer out of an element
- pointercancel: The event fired when the user's pointer interaction is interrupted (such as by switching to a different application
Syntax:
<element pointerdown ="ID">
<element pointerup ="ID">
<element pointermove ="ID">
<element pointerover= "ID">
<element pointerout = "ID">
<element pointercancel= "ID">
Why pointer events are better than mouse events?
Pointer events and mouse events are both used for handling user interactions with a webpage, such as clicks, hover, and scrolling. However, pointer events are generally considered to be better than mouse events for several reasons:
- Pointer events provide a more consistent experience across devices: Pointer events are designed to work with a wide range of input devices, including touchscreens, mouse, and stylus.
- Pointer events provide more information: Pointer events provide more information about the input device, such as its type (e.g. mouse, touch, pen), pressure, and tilt.
- Pointer events are more efficient: Pointer events are designed to be more memory-efficient and have lower overhead than mouse events.
- Pointer events are more flexible: Pointer events are more flexible than mouse events in that they can be used to handle both single and multi-touch interactions.
Example 1: Below program illustrate pointermove and pointerout property:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer Events in JavaScript DOM</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e9ecef;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #495057;
}
.container {
text-align: center;
background: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
max-width: 600px;
width: 90%;
}
h1 {
color: #007bff;
margin-bottom: 20px;
}
p {
font-size: 1.1em;
line-height: 1.6;
color: #6c757d;
transition: color 0.3s ease;
}
footer {
margin-top: 20px;
font-size: 0.9em;
color: #14ec38;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to GeeksforGeeks</h1>
<p id="myP" onpointermove="pointerMove()" onpointerout="pointerOut()">
The pointerMove() function works when the pointer
moves over this text and changes the text color to 'red'.
The pointerOut() function works when the pointer
leaves this text zone and changes the text color to 'blue'.
</p>
<footer>© 2024 GeeksforGeeks. All rights reserved.</footer>
</div>
<script>
function pointerMove() {
document.getElementById("myP").style.color = "red";
}
function pointerOut() {
document.getElementById("myP").style.color = "blue";
}
</script>
</body>
</html>
Output:
Example 2: Below program illustrate pointerup and pointerdown and pointerover properties:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer Events in JavaScript DOM</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #343a40;
}
.container {
text-align: center;
background: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 90%;
}
h1 {
color: #007bff;
margin-bottom: 20px;
}
p {
font-size: 1.1em;
line-height: 1.6;
color: #495057;
transition: color 0.3s ease;
}
footer {
margin-top: 20px;
font-size: 0.9em;
color: #adb5bd;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to GeeksforGeeks</h1>
<p id="myP" onpointerup="pointerUp()" onpointerdown="pointerDown()" onpointerover="pointerOver()">
Pointer events are a set of DOM (Document Object Model)
events that provide a unified way of handling inputs
from a variety of devices, such as touchscreens,
mouse, and pen/stylus. These events are supported by modern
browsers and allow developers to write code that
responds to user interactions with the page in a consistent
and predictable way, regardless of the type of input device being used.
</p>
<footer>© 2024 GeeksforGeeks. All rights reserved.</footer>
</div>
<script>
function pointerUp() {
document.getElementById("myP").style.color = "red";
}
function pointerDown() {
document.getElementById("myP").style.color = "blue";
}
function pointerOver() {
document.getElementById("myP").style.color = "green";
}
</script>
</body>
</html>
Output:
- When the pointer is moved over the text, the pointerOver() function is called. This function changes the color of the text to "green".
- Similarly, when the pointer is clicked on the text, the pointerDown() function is called. This function sets the color "blue" to the text.
- Lastly, when the pointer is released after clicking on the text, the pointerUp() function is called. This function sets the color "red" to the text.
- So, The overall effect is when the pointer is moved over the text, the text color changes to green, when the pointer is pressed on the text, the text color changes to blue and when the pointer is released on the text, the text color changes to red.
Similar Reads
Non-linear Components In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
Spring Boot Tutorial Spring Boot is a Java framework that makes it easier to create and run Java applications. It simplifies the configuration and setup process, allowing developers to focus more on writing code for their applications. This Spring Boot Tutorial is a comprehensive guide that covers both basic and advance
10 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
JavaScript Interview Questions and Answers JavaScript is the most used programming language for developing websites, web servers, mobile applications, and many other platforms. In Both Front-end and Back-end Interviews, JavaScript was asked, and its difficulty depends upon the on your profile and company. Here, we compiled 70+ JS Interview q
15+ min read
Class Diagram | Unified Modeling Language (UML) A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a project—like developers and designers—understand how the system is organized and how its components interact
12 min read
3-Phase Inverter An inverter is a fundamental electrical device designed primarily for the conversion of direct current into alternating current . This versatile device , also known as a variable frequency drive , plays a vital role in a wide range of applications , including variable frequency drives and high power
13 min read
Backpropagation in Neural Network Back Propagation is also known as "Backward Propagation of Errors" is a method used to train neural network . Its goal is to reduce the difference between the model’s predicted output and the actual output by adjusting the weights and biases in the network.It works iteratively to adjust weights and
9 min read