Событие — это сигнал из браузера, что что -то случилось. Все узлы дома имеют такие сигналы (хотя события не являются уникальными для дома).
Вот список наиболее распространенных домашних мероприятий, только на данный момент:
Мыши -связанные события:
- Нажмите — следует за левой кнопкой мыши после нажатия элемента (на устройствах с сенсорным экраном происходит после стука).
- Contextmenu — происходит после правого нажима на элементе.
- Mouseover / Mouseout — происходит, когда мышь указывает на элемент / оставляет его.
- Mousedown / MouseUp — Когда кнопка мыши нажата / выпущена на элементе.
- MouseMove — Когда мышь движется.
События на элементах управления:
- Отправить — пользователь отправил форму.
- Фокус — пользователь сосредоточен на элементе, например, нажал.
События клавиатуры:
- Keydown и Keyup — когда пользователь нажимает / замедляет клавишу.
События документа:
- Domcontentloaded — Когда HTML заряжен и обрабатывается, Дом документов полностью построен и доступен.
События CSS:
- TransitionEnd — Когда анимация CSS завершена.
Есть много других событий. Мы подробно обсудим их в последующих главах.
Обработчики событий
Событие может быть назначено обработчику событий, то есть функция, которая будет запущена во время события.
Хандлеры — это то, что позволяет коду JavaScript реагировать на действия пользователя.
Есть несколько способов назначить обработчика на мероприятие. Мы посмотрим на них сейчас, начиная с самого простейшего.
Использование атрибута HTML
Хэндлер может быть назначен непосредственно в теге, в вызванном атрибуте.
Например, чтобы назначить обработчик для события на входном элементе, вы можете использовать атрибут OnClick, например:
Когда мышь нажимает кнопку, будет сделан код, указанный в атрибуте OnClick.
Обратите внимание, что для содержания атрибута OnClick используются одиночные кавычки, потому что сам атрибут находится в двойных кавычках. Если мы забудем об этом и поместим двойные кавычки в атрибут, такие как: onclick = «alert (» click! «)», Код не будет работать.
Атрибут тега HTML не является наиболее удобным местом для написания большого количества кода, поэтому лучше создать отдельную функцию JavaScript и вызвать ее там.
Следующий пример запускает функцию countbbits () после нажатия:
Как мы помним, атрибут тега HTML не различает размер букв, поэтому Onclick будет действовать так же, как Onclick и Onclick … но, как правило, атрибуты написаны буквами с нижней частью: Onclick.
Использование свойства DOM-объекта
Вы можете назначить обработчик со свойствами элемента дома.
Например, elem.nclick:
Если обработчик определяется через атрибут, браузер считывает тег HTML, создает новую функцию из содержимого атрибута и сохраняет его в свойство.
Этот метод в основном такой же, как и предыдущий.
Хэндлер всегда хранится в свойствах дома, и атрибут является лишь одним из способов его инициализации.
Эти два примера кода работают одинаково:
Поскольку в элементе дома может быть только одно свойство, вызванное OnClick, вы не можете назначить более одного обработчика таким образом.
В приведенном ниже примере назначение обработчика через JavaScript вызовет обработчика из атрибута:
Кстати, обработчик также может быть назначен существующей функции:
Вы можете удалить обработчик, назначив элемент. Anclick = null.
Доступ к элементу через this
Внутри обработчика это относится к текущему элементу, то есть тот, кто, как говорят, «приостановлен» (то есть назначен).
В приведенном ниже коде кнопка печатает его содержимое, используя это.innerhtml:
Частые ошибки
Если вы только начинаете свое приключение с событий, обратите внимание на пункты ниже.
Функция должна быть назначена как SayThanks, а не SayThanks ().
Если вы добавите скобки, то SayThanks () уже является вызовом, который результат (равный неопределенным, поскольку функция не возвращается) будет назначен OnClick. Так что это не сработает.
… но в распадах, в отличие от имущества, необходимы скобки:
Это различие легко объяснить. Когда браузер создает обработчик из атрибута, он автоматически создает функцию тела из значения атрибута: saythanks().
Таким образом, накладные расходы генерируют это свойство:
Используйте функции, а не строки.
Назначение обработчика строковому элементу. onclick = «alert (1)» также будет работать. Это делается из соображений совместимости, но не рекомендуется.
SetAttribute не следует использовать для обработчиков.
Такой вызов не будет действенным:
Случай свойства DOM важен.
Используйте elem.onclick вместо elem.ONCLICK, так как свойства DOM чувствительны к регистру.
addEventListener
Основной недостаток описанных выше назначений обработчиков заключается в том, что у вас не может быть нескольких обработчиков для каждого события.
Например, одна часть кода хочет, чтобы кнопка светилась при нажатии, а другая часть хочет создать сообщение.
Мы хотим назначить этому два обработчика. Но новое свойство DOM перезапишет предыдущее:
Разработчики стандартов давно поняли это и предложили альтернативный способ назначения обработчиков с помощью специальных методов addEventListener и removeEventListener. У них нет этого недостатка.
Синтаксис добавления обработчиков:
- один раз: если true, обработчик будет автоматически удален после выполнения.
- захват: фаза, в которой должен иметь место обработчик, см. главу «Всплывающее окно и погружение» для получения более подробной информации. Исторически опционы могут быть фальшивыми/истинными, что то же самое, что и .
- пассивный: если true, это означает, что обработчик никогда не вызовет preventDefault(), подробнее об этом в главе «Действия браузера по умолчанию».
Чтобы удалить обработчик, используйте removeEventListener:
Вы должны делегировать именно ту функцию обработчика, которая была назначена для удаления.
Это не сработает:
Обработчик не будет удален, потому что переданный removeEventListener — это не та же самая функция, а другая с тем же кодом, но это не имеет значения.
Это правда:
Примечание — если функция-обработчик где-то не сохранена, мы не можем ее удалить. Не существует способа получить обработчик событий, назначенных с помощью addEventListener.
Метод addEventListener позволяет добавлять несколько обработчиков к одному событию одного и того же элемента, например:
Как видно из приведенного выше примера, можно одновременно назначать обработчики через свойства DOM и addEventListener. Однако, чтобы избежать путаницы, желательно выбрать один метод.
Есть некоторые события, которые нельзя назначить свойству DOM, но можно назначить с помощью addEventListener.
Например, событие DOMContentLoaded возникает после завершения загрузки и построения документа DOM.
Таким образом, addEventListener является более общим. Хотя мы отмечаем, что таких событий меньшинство, они являются скорее исключением, чем правилом.
Объект события
Чтобы хорошо обработать событие, вам могут понадобиться подробности о том, что произошло. Не только «щелчок» или «нажатие клавиши», но и координаты указателя мыши, какая клавиша была нажата и так далее.
Когда происходит событие, браузер создает объект события, записывает в него подробности и передает в качестве аргумента функции-обработчику.
В следующем примере показано получение координат мыши из объекта события:
Некоторые свойства объекта события:
event.type Тип события, в данном случае «щелчок». event.currentTarget Элемент, для которого был вызван обработчик. Значение обычно совпадает с этим, но если обработчик является стрелочной функцией или с ней связан другой объект, мы можем получить элемент из event.currentTarget. event.clientX / event.clientY Координаты курсора в момент клика, для событий мыши.
Существует также ряд других свойств, зависящих от типа события, с которыми мы будем иметь дело в следующих главах.
При назначении обработчиков в HTML вы также можете использовать объект события, например:
Это возможно потому, что когда браузер создает функцию-обработчик из атрибута, она выглядит так: функция (событие)
< alert(event.type) >
. То есть его первый аргумент называется «событие», а тело берется из атрибута.
Объект-обработчик: handleEvent
Мы можем назначить обработчик не только функции, но и объекту с помощью addEventListener. В этом случае при возникновении события вызывается метод объекта handleEvent.
Как видите, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent (событие) при возникновении события.
Мы также можем использовать класс для этой цели:
Здесь один и тот же объект обрабатывает оба события. Обратите внимание, нам нужно явно назначить оба обработчика через addEventListener. Тогда объект меню будет получать события mousedown и mouseup, но не другие (неназначенные) типы событий.
Метод handleEvent не должен сам выполнять всю работу. Он может вызывать другие методы, предназначенные для обработки определенных типов событий, например:
Обработка событий теперь разделена по методам, что упрощает обработку кода.
Итого
Существует три метода назначения дескрипторов событий:
- Атрибут HTML: onclick = «.».
- Свойство DOM: elem.onclick = функция.
- Специальные методы: elem.addEventListener (событие, обработчик [, фаза]) для добавления, removeEventListener для удаления.
Атрибуты HTML редко используются, потому что JavaScript в теге HTML выглядит немного странно. Там не так много кода можно написать.
Мы можем использовать свойство DOM, но не можем назначить более одного обработчика для одного типа события. Во многих случаях мы можем принять это ограничение.
Последний метод является наиболее гибким, но нам нужно написать больше кода. Есть определенные типы событий, которые работают только через него, например, transitionend и DOMContentLoaded. Кроме того, addEventListener поддерживает объекты в качестве обработчиков событий. Это вызывает метод handleEvent.
Независимо от того, как вы назначаете обработчик, он получает объект события в качестве первого аргумента. Этот объект содержит подробную информацию о том, что произошло.
