Цель: Программа на концепции события мыши.

Требование:

  1. Рабочий ПК или ноутбук,
  2. Установлена ​​любая операционная система
  3. Любой браузер (Google Chrome)
  4. Любой редактор кода (VS Code)

Теория:

Интерфейс MouseEvent представляет события, происходящие из-за взаимодействия пользователя с указывающим устройством (например, с мышью). Общие события, использующие этот интерфейс, включают click, dblclick, mouseup, mousedown.

MouseEvent происходит от UIEvent, которое, в свою очередь, происходит от Event. Хотя метод MouseEvent.initMouseEvent() сохранен для обратной совместимости, создание объекта MouseEvent должно выполняться с помощью конструктора MouseEvent().

События происходят много раз, некоторые из них описаны ниже.

Определение и использование при наведении курсора мыши

Событие onmouseover возникает, когда указатель мыши перемещается на элемент или на один из его дочерних элементов.

Пример

Выполнение JavaScript при перемещении указателя мыши на изображение:

<img onmouseover=”bigImg(this)” src=”smiley.gif” alt=”Smiley”>

Определение и использование onmouseout

Событие onmouseout возникает, когда указатель мыши перемещается за пределы элемента или одного из его дочерних элементов.

Пример

Выполнение JavaScript при перемещении указателя мыши за пределы изображения:

<img onmouseout=”normalImg(this)” src=”smiley.gif” alt=”Smiley”>

OnclickОпределение и использование

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

Пример

Выполнение JavaScript при нажатии кнопки:

<button onclick=”myFunction()”>Click me</button>

OndblclickОпределение и использование

Событие dblclick генерирует событие при двойном щелчке элемента. Событие срабатывает при двойном щелчке элемента за очень короткий промежуток времени. Мы также можем использовать метод JavaScript addEventListener() для запуска события двойного щелчка.

Пример

Выполнение JavaScript при двойном щелчке элемента ‹p›:

<p ondblclick=”myFunction()”>Double-click me</p>

Вывод: Мы можем сделать вывод, что мы успешно реализовали программу на основе концепции события мыши.

Результат: Наконец, мы успешно реализовали программу ed на концепции события мыши.

См. другиеПрактикалы