События указателя в Javascript DOM?

События указателя — это набор событий DOM (объектная модель документа), которые обеспечивают унифицированный способ обработки ввода с различных устройств, таких как сенсорные экраны, мышь и перо/стилус. Эти события поддерживаются современными браузерами и позволяют разработчикам писать код, который последовательно и предсказуемо реагирует на взаимодействие пользователя со страницей, независимо от типа используемого устройства ввода.

Некоторые из наиболее часто используемых событий указателя включают в себя:

pointerdown:событие срабатывает, когда пользователь нажимает указатель на элемент.
pointerup: событие срабатывает, когда пользователь отпускает указатель с элемента.
pointermove: событие срабатывает, когда пользователь наводит указатель на элемент.
pointerover: событие срабатывает, когда пользователь наводит указатель на элемент.
pointerout: событие срабатывает, когда пользователь перемещает указатель за пределы элемента.
pointercancel: событие, возникающее, когда взаимодействие пользователя с указателем прерывается (например, при переключении на другое приложение).

Синтаксис:

свойство указателя вниз:

<element pointerdown ="ID">

свойство указателя:

<element pointerup ="ID">

свойство pointermove:

<element pointermove ="ID">

свойство указателя:

<element pointerover= "ID">

свойство указателя:

<element pointerout = "ID">

свойство pointercancel:

<element pointercancel= "ID">

Почему события указателя лучше, чем события мыши?

События указателя и события мыши используются для обработки взаимодействий пользователя с веб-страницей, таких как щелчки, наведение и прокрутка. Однако обычно считается, что события указателя лучше, чем события мыши, по нескольким причинам:

События указателя обеспечивают более согласованную работу на разных устройствах:события указателя предназначены для работы с широким спектром устройств ввода, включая сенсорные экраны, мышь и стилус.
События указателя предоставляют дополнительную информацию.События указателя предоставляют дополнительную информацию об устройстве ввода, например, о его типе (например, мышь, касание, перо), нажиме и наклоне.
События указателя более эффективны:события указателя предназначены для более эффективного использования памяти и имеют меньшие накладные расходы, чем события мыши.
События указателя более гибкие:события указателя более гибкие, чем события мыши, поскольку их можно использовать для обработки как однократного, так и множественного касания.

Пример 1: Ниже программа иллюстрирует свойство pointermove и pointerout:

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Pointer events Javascript DOM</title>

</head>

<body>

    <center>

        <div>

            <h1>

                Welcome to GeeksforGeeks

            </h1>

            <p id="myP" onpointermove="pointerMove()"

                onpointerout="pointerOut()">

                The pointerMove() function works when the

                pointer is go over text and this paragraph

                sets the color of the text to 'red'.

                The pointerOut() function works when the

                pointer goes out of text zone then and the

                color of the text sets to 'blue'.

            </p>

        </div>

        <script>

            function pointerMove() {

                document.getElementById("myP")

                    .style.color = "red";

            }

            function pointerOut() {

                document.getElementById("myP")

                    .style.color = "blue";

            }

        </script>

    </center>

</body>

</html>

Выход:

События указателя Javascript DOM

Пример 2: Ниже программа иллюстрирует свойства pointerup, pointerdown и pointerover:

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Pointer events Javascript DOM</title>

</head>

<body>

    <center>

        <div>

            <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>

            <script>

                function pointerUp() {

                    document.getElementById("myP")

                        .style.color = "red";

                }

                function pointerDown() {

                    document.getElementById("myP")

                        .style.color = "blue";

                }

                function pointerOver() {

                    document.getElementById("myP")

                        .style.color = "yellow";

                }

            </script>

    </center>

</body>

</html>

Выход:

Когда указатель перемещается по тексту, вызывается функция pointerOver(). Эта функция изменяет цвет текста на «желтый».
Точно так же, когда указатель нажимается на текст, вызывается функция pointerDown(). Эта функция устанавливает синий цвет текста.
Наконец, когда указатель отпускается после щелчка по тексту, вызывается функция pointerUp(). Эта функция устанавливает красныйцвет текста.
Итак, общий эффект заключается в том, что когда указатель перемещается по тексту, цвет текста меняется на желтый, когда указатель нажимается на текст, цвет текста меняется на синий, а когда указатель отпускается на текст, цвет текста меняется на красный.

События указателя Javascript DOM