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

Создайте веб-приложение с помощью современного JavaScript и веб-компонентов Программирование и разработка

События указателя — это набор событий 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">

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

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

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

Пример 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

События указателя 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

Оцените статью
bestprogrammer.ru
Добавить комментарий