Javascript события мыши: Основы событий мыши

Содержание

Список событий в JavaScript

Бывают различные виды событий. К примеру, события: форм, полей, мыши, клавиатуры, страницы. Далее в таблице собраны названия событий и их описание.

События мыши

Атрибут	Описание
click	Клик мыши на элементе (событие срабатывает после того, как кнопка мыши отпущена).
dblclick	Сделан двойной щелчок.
mousedown	Кнопка мыши нажата.
mouseup	Кнопка мыши отжата.
mouseover	Указатель мыши находится над элементом.
mousemove	Указатель мыши движется над элементом.
mouseout	Указатель мыши двигался над элементом, но ушёл с него.

События клавиатуры

Атрибут	Описание
keydown	Зажата кнопка на клавиатуре.
keypress	Тоже что и «keydown», но и кнопка зажимается настолько долго, что происходит повторный набор символа.
keyup	Была отпущена нажатая кнопка.

События полей, форм и страницы

Атрибут	Описание
submit	Форма начала отправляться (нажата кнопка «submit»), но переадресация на страницу в атрибуте «action» ещё не началась.
change	Содержимое элемента изменилось (срабатывает в том числе, если изменились значение атрибутов).
select	Текст или дочерние элементы выделены.
focus	Элемент получил фокус. К примеру, клик по текстовому полю даёт на него фокус и можно набирать текст
blur	Элемент потерял фокус.
load	Завершена загрузка страницы в браузере.
unload	Страница в браузере закрывается или происходит переход на другую страницу по ссылке.
scroll	Происходит прокрутка страницы или элемента.

Cмотрите другие статьи:

Работа с атрибутами элементов в JavaScript

Список атрибутов для событий в JavaScript

Была ли эта статья полезна? Есть вопрос?

Закажите недорогой хостинг Заказать

всего от 290 руб

Подробнее о событиях JS — презентация онлайн

Похожие презентации:

JavaScript. События

События Windows. Обработчики событий. (Урок 2)

Графический редактор

Устройство компьютера для пользователей старшего поколения

События. Цветные блоки и скрипты

Рабочий стол. Управление компьютером с помощью мыши

JavaScript-код на странице и во внешнем файле

Blender 3D Мастерская «Третье измерение» ver. 2.0 Наноград, Сочи 2017

Технология Drag&Drop

Работа с Windows Form application

1. Подробнее о событиях JS

2. Типы событий мыши

Простые события
mousedown
Кнопка мыши нажата над элементом.

mouseup
Кнопка мыши отпущена над элементом.
mouseover
Мышь появилась над элементом.
mouseout
Мышь ушла с элемента.
mousemove
Каждое движение мыши над элементом генерирует это событие.
Комплексные события
click
Вызывается при клике мышью, то есть при mousedown
, а затем
mouseup на одном элементе
contextmenu
Вызывается при клике правой кнопкой мыши на элементе.
dblclick
Вызывается при двойном клике по элементу.

3. Получение информации о кнопке: which

При обработке событий, связанных с кликами мыши,
бывает важно знать, какая кнопка нажата.
Для получения кнопки мыши в объекте event есть
свойство which.
На практике оно используется редко, т.к. обычно
обработчик вешается либо onclick – только на левую
кнопку мыши, либо oncontextmenu – только на правую.
Возможны следующие значения:
• event.which == 1 – левая кнопка
• event.which == 2 – средняя кнопка
• event.which == 3 – правая кнопка

4.

Правый клик: oncontextmenu

5. Модификаторы shift, alt, ctrl и meta

6. Координаты

7. События mouseover/mouseout, свойство relatedTarget

http://learn.javascript.ru/article/mousemove-mouseover-mouseout-mouseenter-mousele

8. Мышь: Drag’n’Drop

Drag’n’Drop – это возможность захватить мышью элемент и
перенести его. В свое время это было замечательным открытием в
области интерфейсов, которое позволило упростить большое
количество операций.
Основной алгоритм Drag’n’Drop выглядит так:
• Отслеживаем нажатие кнопки мыши на переносимом элементе
при помощи события mousedown.
• При нажатии – подготовить элемент к перемещению.
• Далее отслеживаем движение мыши через mousemove и
передвигаем переносимый элемент на новые координаты
путём смены left/top и position:absolute.
• При отпускании кнопки мыши, то есть наступлении события
mouseup – остановить перенос элемента и произвести все
действия, связанные с окончанием Drag’n’Drop.

9. Мышь: Drag’n’Drop

10. Задача

1.Реализовать пример с таблицей.
Дополнительная подсветка
осуществляется с зажатым Ctrl
2.Реализовать пример с
перетаскиванием. Доработать
недостатки.

English Русский Правила

MouseEvent offsetX Свойство

❮ Предыдущий Свойства события Далее ❯

Пример

Получить координату x щелчка:

let x = event.offsetX;

Попробуйте сами »

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

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

Свойство offsetX доступно только для чтения.

Свойства координат

Свойство	Относительно
Свойство screenX	Область экрана
Свойство screenY 9003 8	Область экрана
Свойство clientX	Область окна
Свойство clientY	Область окна
Свойство pageX	Страница (документ)
Свойство pageY	Страница (документ)
Свойство offsetX	Целевой элемент
Свойство offsetY	Целевой элемент

См.

также:

Объект события мыши

Синтаксис

событие .offsetX

Технические подробности

Возвращаемое значение:	Число. X (горизонтальная) координата указателя мыши в пикселях.
Версия DOM:	События мыши уровня DOM 4.

Поддержка браузера

event.offsetX — это функция DOM Level 1 (1998).

Полностью поддерживается во всех браузерах:


Хром	Край	Фаерфокс	Сафари	Опера	ИЭ
Да	Да	Да	Да	Да	9-11

❮ Предыдущий Свойства события Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 67 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

MouseEvent: конструктор MouseEvent() — веб-API

Конструктор MouseEvent() создает новый объект MouseEvent .

 новый MouseEvent(тип)
новый MouseEvent (тип, параметры)

Параметры

тип

Строка с названием события. Он чувствителен к регистру, и браузеры устанавливают его на 9.0016 dblclick , mousedown , mouseenter , mouseleave , mousemove , mouseout , mouseover или

мышь .

Опции Дополнительно

Объект, который в дополнение к свойствам, определенным в UIEvent() , может иметь следующие свойства:

screenX Дополнительно

Число, по умолчанию 0 , то есть горизонтальное положение события мыши на экране пользователя; установка этого значения не перемещает указатель мыши.

Экран Y Дополнительно

Число, по умолчанию 0 , то есть вертикальное положение события мыши на экране пользователя; установка этого значения не перемещает указатель мыши.

clientX Дополнительно

Число, по умолчанию 0 , то есть горизонтальное положение события мыши в клиентском окне на экране пользователя; установка этого значения не перемещает указатель мыши.

клиентY Дополнительно

Число, по умолчанию 0 , то есть вертикальное положение события мыши в клиентском окне на экране пользователя; установка этого значения не перемещает указатель мыши.

клавиша Ctrl Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша ctrl . По умолчанию false .

shiftKey Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша

shift . По умолчанию false .

altKey Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша alt . По умолчанию false .

metaKey Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша meta . По умолчанию false .

Кнопка Дополнительно

Число, по умолчанию 0 , который описывает, какая кнопка нажата во время событий, связанных с нажатием или отпусканием кнопки:

Значение	Значение
`0`	Основная кнопка нажата (обычно левая кнопка) или не инициализирована
`1`	Нажата вспомогательная кнопка (обычно средняя кнопка)
`2`	Нажата вторичная кнопка (обычно правая кнопка)

кнопки Дополнительно

Число, по умолчанию 0 , описывающее, какие кнопки нажимаются при запуске события:

Значение битового поля	Значение
`0`	Кнопка не нажата
`1`	Нажата главная кнопка (обычно левая кнопка)
`2`	Нажата вторичная кнопка (обычно правая кнопка)
`4`	Нажата вспомогательная кнопка (обычно средняя кнопка)

EventTarget , по умолчанию null , который является только что оставленным элементом (в случае мыши введите или наведите курсор мыши на ) или входит (в случае mouseout или mouseleave ).

регион Нестандартный Дополнительно

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

В некоторых реализациях передача чего-либо, кроме числа для экрана и клиентские поля будут выдавать TypeError .

Спецификация
События пользовательского интерфейса # dom-mouseevent-mouseevent

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

MouseEvent , интерфейс создаваемых им объектов.