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
How to select DOM Elements in JavaScript ?
Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript. It allows developers to interact with and manipulate elements on a webpage dynamically. Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or mo
3 min read
JavaScript Events
JavaScript Events are actions or occurrences that happen in the browser. They can be triggered by various user interactions or by the browser itself. HTML<html> <script> function myFun() { document.getElementById( "gfg").innerHTML = "GeeksforGeeks"; } </script> <body> <but
3 min read
JavaScript - How to Manipulate DOM Elements?
The DOM stands for the Document Object Model (DOM), which allows us to interact with the document and change its structure, style, and content. We can use the DOM to change the content and style of an HTML element by changing its properties. In this article, we will discuss how to manipulate the DOM
6 min read
How to work with document.embeds in JavaScript ?
The document. embeds is a property in JavaScript that provides access to all embedded elements such as <embed> and <object> tags within the current document. These embedded elements are typically used to display external content, such as media files (e.g., videos, audio) or interactive c
3 min read
How are DOM utilized in JavaScript ?
What is DOM The document object Model (DOM) represents the full HTML document. When an HTML document is loaded within the browser, it becomes a document object. The root element represents the HTML document, its properties, and its methods. With the assistance of a document object, we will add dynam
3 min read
How to Create a Link in JavaScript ?
In JavaScript, a link typically refers to creating HTML hyperlinks (<a> tags) dynamically using JavaScript. You can link using a document.createElement('a'), setting attributes like href and textContent, and then appending it to the document with appendChild().Here are some common approaches t
4 min read
JavaScript HTML DOM
The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a pa
4 min read
JavaScript- Reference the Current DOM Element in JS
To reference the current DOM element in JavaScript, you can use this keyword within an event listener or use the event.target property to explicitly access the element that triggered the event.1. Using this in Event ListenersThis keyword refers to the button element that triggered the click event, a
2 min read
Implementation of LinkedList in Javascript
In this article, we will be implementing the LinkedList data structure in Javascript.A linked list is a linear data structure where elements are stored in nodes, each containing a value and a reference (or pointer) to the next node. It allows for efficient insertion and deletion operations.Each node
5 min read
Implementation of Doubly Linked List in JavaScript
This article will demonstrate the Implementation of Doubly Linked List In JavaScript. A doubly linked list (DLL) is a special type of linked list in which each node contains a pointer to the previous node as well as the next node of the linked list. Doubly Linked List in JavaScriptTo create we have
4 min read