JavaScript в браузере использует модель программирования, управляемую событиями. Все начинается со следования за событием. Это введение в события JavaScript и как работает обработка событий.
- Вступление
- Обработчики событий
- Прослушивание разных элементов
- Объект события
- Возбуждение событий и захват событий
- Остановка распространения
- Популярные события
- Дросселирование
Вступление
JavaScript в браузере использует модель программирования, управляемую событиями.
Все начинается со следования за событием.
Событием может быть загрузка DOM или асинхронный запрос, который завершает выборку, или пользователь щелкает элемент или прокручивает страницу, или пользователь вводит текст с клавиатуры.
Есть много разных мероприятий.
Обработчики событий
Вы можете ответить на любое событие, используяОбработчик события, которая вызывается при возникновении события.
Вы можете зарегистрировать несколько обработчиков для одного и того же события, и все они будут вызываться, когда это событие произойдет.
JavaScript предлагает три способа зарегистрировать обработчик событий:
Встроенные обработчики событий
Этот стиль обработчиков событий сегодня очень редко используется из-за его ограничений, но в первые дни JavaScript это был единственный способ:
<a href="site.com" onclick="dosomething();">A link</a>
Обработчики событий DOM
Это обычное явление, когда объект имеет не более одного обработчика событий, поскольку в этом случае нет возможности добавить несколько обработчиков:
window.onload = () => {
//window loaded
}
Чаще всего используется при работе сXHRЗапросы:
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
//.. do something
}
Вы можете проверить, назначен ли уже обработчик свойству, используяif ('onsomething' in window) {}
.
С помощьюaddEventListener()
Этосовременный способ. Этот метод позволяет зарегистрировать столько обработчиков, сколько нам нужно, и он самый популярный, который вы найдете:
window.addEventListener('load', () => {
//window loaded
})
Обратите внимание, что IE8 и более ранние версии не поддерживают это, а вместо этого используют собственные
attachEvent()
API. Имейте это в виду, если вам нужно поддерживать старые браузеры.
Прослушивание разных элементов
Вы можете слушатьwindow
для перехвата «глобальных» событий, таких как использование клавиатуры, и вы можете прослушивать определенные элементы, чтобы проверять события, происходящие с ними, например, щелчок мышью по кнопке.
Вот почемуaddEventListener
иногда вызываетсяwindow
, иногда на элементе DOM.
Объект события
Обработчик события получаетEvent
объект в качестве первого параметра:
const link = document.getElementById('my-link')
link.addEventListener('click', event => {
// link clicked
})
Этот объект содержит множество полезных свойств и методов, например:
target
, элемент DOM, вызвавший событиеtype
, тип событияstopPropagation()
, вызывается, чтобы остановить распространение события в DOM
Другие свойства предоставляются событиями определенного типа, напримерEvent
это интерфейс для различных конкретных событий:
- MouseEvent
- KeyboardEvent
- DragEvent
- FetchEvent
- … и другие
У каждого из них есть ссылка на страницу MDN, поэтому вы можете проверить все их свойства.
Например, когда происходит KeyboardEvent, вы можете проверить, какая клавиша была нажата, в удобочитаемом формате (Escape
,Enter
и так далее), проверивkey
свойство:
window.addEventListener('keydown', event => {
// key pressed
console.log(event.key)
})
По событию мыши мы можем проверить, какая кнопка мыши была нажата:
const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
// mouse button pressed
console.log(event.button) //0=left, 2=right
})
Возбуждение событий и захват событий
Пузыри и захват - это две модели, которые используются для распространения событий.
Предположим, ваша структура DOM
<div id="container">
<button>Click me</button>
</div>
Вы хотите отслеживать, когда пользователи нажимают на кнопку, и у вас есть 2 слушателя событий, один наbutton
, и один на#container
. Помните, что щелчок по дочернему элементу всегда будет распространяться на его родительский элемент, если вы не остановите распространение (см. Ниже).
Эти прослушиватели событий будут вызываться по порядку, и этот порядок определяется используемой моделью восходящей цепочки / захвата событий.
Пузыриозначает, что событие распространяется от элемента, по которому был выполнен щелчок (дочерний элемент), до всего его родительского дерева, начиная с ближайшего.
В нашем примере обработчик наbutton
будет стрелять до#container
обработчик.
Захватнаоборот: внешние обработчики событий запускаются перед более конкретным обработчиком,button
.
По умолчанию всплывают все события.
Вы можете выбрать захват событий, применив третий аргумент к addEventListener, установив для него значениеtrue
:
document.getElementById('container').addEventListener(
'click',
() => {
//window loaded
},
true
)
Обратите внимание, чтосначала запускаются все обработчики событий захвата.
Затем все обработчики восходящих событий.
Порядок следует этому принципу: DOM просматривает все элементы, начиная с объекта Window, и ищет элемент, по которому был выполнен щелчок. При этом он вызывает любой обработчик событий, связанный с событием (фаза захвата).
Как только он достигает цели, он затем повторяет путь к родительскому дереву до объекта Window, снова вызывая обработчики событий (фаза восходящей цепочки).
Остановка распространения
Событие в элементе DOM будет распространено на все его дерево родительских элементов, если оно не остановлено.
<html>
<body>
<section>
<a id="my-link" ...>
Событие щелчка наa
будет распространяться наsection
а потомbody
.
Вы можете остановить распространение, вызвавstopPropagation()
метод Event, обычно в конце обработчика события:
const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
// process the event
// ...
event.stopPropagation()
})
Популярные события
Вот список наиболее распространенных событий, с которыми вам придется столкнуться.
Нагрузка
load
стреляют поwindow
иbody
элемент после завершения загрузки страницы.
События мыши
click
срабатывает при нажатии кнопки мыши.dblclick
при двойном щелчке мышью. Конечно в этом случаеclick
запускается непосредственно перед этим событием.mousedown
,mousemove
иmouseup
может использоваться в комбинации для отслеживания событий перетаскивания. Будь осторожен сmousemove
, поскольку он срабатывает много раз во время движения мыши (см.удушениепотом)
События клавиатуры
keydown
срабатывает при нажатии кнопки клавиатуры (и каждый раз, когда клавиша повторяется, пока кнопкаостаетсянажата).keyup
срабатывает при отпускании клавиши.
Прокрутка
Вscroll
событие запущеноwindow
каждый раз, когда вы прокручиваете страницу. Внутри обработчика событий вы можете проверить текущую позицию прокрутки, установив флажокwindow.scrollY
.
Имейте в виду, что это мероприятие не разовое. Он срабатывает много раз во время прокрутки, а не только в конце или начале прокрутки, поэтому не выполняйте никаких тяжелых вычислений или манипуляций в обработчике - используйтеудушениевместо.
Дросселирование
Как мы уже упоминали выше,mousemove
иscroll
- это два события, которые не запускаются один раз для каждого события, а, скорее, они постоянно вызывают свою функцию обработчика событий в течение всего действия.
Это потому, что они предоставляют координаты, чтобы вы могли отслеживать, что происходит.
Если вы выполните сложную операцию в обработчике событий, это повлияет на производительность и приведет к замедлению работы пользователей вашего сайта.
Библиотеки, которые обеспечивают регулирование, напримерЛодашреализовать его в более чем 100 строках кода для обработки всех возможных вариантов использования. Это простая и понятная реализация, в которой используетсяsetTimeoutдля кеширования события прокрутки каждые 100 мс:
let cached = null
window.addEventListener('scroll', event => {
if (!cached) {
setTimeout(() => {
//you can access the original event at `cached`
cached = null
}, 100)
}
cached = event
})
Скачать мою бесплатнуюРуководство для начинающих по JavaScript
Больше руководств по js:
- Чего следует избегать в JavaScript (плохие части)
- Отсрочки и обещания в JavaScript (+ пример Ember.js)
- Как загрузить файлы на сервер с помощью JavaScript
- Стиль кодирования JavaScript
- Введение в массивы JavaScript
- Введение в язык программирования JavaScript
- Полное руководство по ECMAScript 2015-2019
- Понимание обещаний JavaScript
- Лексическая структура JavaScript
- Типы JavaScript
- Переменные JavaScript
- Список примеров идей веб-приложений
- Введение в функциональное программирование с помощью JavaScript
- Современный асинхронный JavaScript с Async и Await
- Циклы и область действия JavaScript
- Структура данных JavaScript карты
- Заданная структура данных JavaScript
- Руководство по шаблонным литералам JavaScript
- Дорожная карта для изучения JavaScript
- Выражения JavaScript
- Откройте для себя таймеры JavaScript
- Объяснение событий JavaScript
- Циклы JavaScript
- Пишите циклы JavaScript, используя map, filter, reduce и find
- Цикл событий JavaScript
- Функции JavaScript
- Глоссарий JavaScript
- Замыкания JavaScript объяснены
- Учебник по функциям стрелок в JavaScript
- Руководство по регулярным выражениям JavaScript
- Как проверить, содержит ли строка подстроку в JavaScript
- Как удалить элемент из массива в JavaScript
- Как глубоко клонировать объект JavaScript
- Introduction to Unicode and UTF-8
- Юникод в JavaScript
- Как ввести первую букву строки в верхний регистр в JavaScript
- Как отформатировать число как денежное значение в JavaScript
- Как преобразовать строку в число в JavaScript
- это в JavaScript
- Как получить текущую метку времени в JavaScript
- Строгий режим JavaScript
- Выражения функции немедленного вызова JavaScript (IIFE)
- Как перенаправить на другую веб-страницу с помощью JavaScript
- Как удалить свойство из объекта JavaScript
- Как добавить элемент в массив в JavaScript
- Как проверить, не определено ли свойство объекта JavaScript
- Введение в модули ES
- Введение в CommonJS
- Асинхронное программирование и обратные вызовы JavaScript
- Как заменить все вхождения строки в JavaScript
- Краткое справочное руководство по современному синтаксису JavaScript
- Как обрезать ведущий ноль в числе в JavaScript
- Как проверить объект JavaScript
- Полное руководство по датам JavaScript
- Учебник Moment.js
- Точка с запятой в JavaScript
- Арифметические операторы JavaScript
- Объект JavaScript Math
- Создавайте случайные и уникальные строки в JavaScript
- Как заставить ваши функции JavaScript спать
- Прототипное наследование JavaScript
- Исключения JavaScript
- Как использовать классы JavaScript
- Поваренная книга JavaScript
- Цитаты в JavaScript
- Как проверить адрес электронной почты в JavaScript
- Как получить уникальные свойства набора объектов в массиве JavaScript
- Как проверить, начинается ли строка с другой в JavaScript
- Как создать многострочную строку в JavaScript
- Руководство по ES6
- Как получить текущий URL в JavaScript
- Руководство ES2016
- Как инициализировать новый массив значениями в JavaScript
- Руководство ES2017
- Руководство ES2018
- Как использовать Async и Await с Array.prototype.map ()
- Асинхронный и синхронный код
- Как сгенерировать случайное число между двумя числами в JavaScript
- Учебное пособие по HTML Canvas API
- Как получить индекс итерации в цикле for-of в JavaScript
- Что такое одностраничное приложение?
- Введение в WebAssembly
- Введение в JSON
- Руководство по JSONP
- Should you use or learn jQuery in 2020?
- Как скрыть элемент DOM с помощью простого JavaScript
- Как объединить два объекта в JavaScript
- Как очистить массив JavaScript
- Как закодировать URL-адрес с помощью JavaScript
- Как установить значения параметров по умолчанию в JavaScript
- Как отсортировать массив объектов по значению свойства в JavaScript
- Как подсчитать количество свойств в объекте JavaScript
- call () и apply () в JavaScript
- Введение в PeerJS, библиотеку WebRTC
- Работа с объектами и массивами с помощью Rest и Spread
- Разрушение объектов и массивов в JavaScript
- Полное руководство по отладке JavaScript
- Руководство по TypeScript
- Динамически выбирать метод объекта в JavaScript
- Передача undefined в JavaScript с немедленным вызовом функциональных выражений
- Свободно типизированные языки против строго типизированных языков
- Как стилизовать элементы DOM с помощью JavaScript
- Трансляция в JavaScript
- Руководство по генераторам JavaScript
- Размер папки node_modules не является проблемой. Это привилегия
- Как решить непредвиденную ошибку идентификатора при импорте модулей в JavaScript
- Как перечислить все методы объекта в JavaScript
- Метод String replace ()
- Метод String search ()
- Как я запускаю небольшие фрагменты кода JavaScript
- Руководство ES2019
- Метод String charAt ()
- Метод String charCodeAt ()
- Метод String codePointAt ()
- Метод String concat ()
- Метод String EndWith ()
- Метод String includes ()
- Метод String indexOf ()
- Метод String lastIndexOf ()
- Метод String localeCompare ()
- Метод String match ()
- Метод String normalize ()
- Метод String padEnd ()
- Метод String padStart ()
- Метод String repeat ()
- Метод String slice ()
- Метод String split ()
- Метод String startWith ()
- Метод String substring ()
- Метод String toLocaleLowerCase ()
- Метод String toLocaleUpperCase ()
- Метод String toLowerCase ()
- Метод String toString ()
- Метод String toUpperCase ()
- Метод String trim ()
- Метод String trimEnd ()
- Метод String trimStart ()
- Мемоизация в JavaScript
- Метод String valueOf ()
- Ссылка на JavaScript: Строка
- Метод Number isInteger ()
- Метод Number isNaN ()
- Метод Number isSafeInteger ()
- Метод Number parseFloat ()
- Метод Number parseInt ()
- Метод Number toString ()
- Метод Number valueOf ()
- Метод Number toPrecision ()
- Метод Number toExponential ()
- Метод Number toLocaleString ()
- Метод Number toFixed ()
- Метод Number isFinite ()
- Ссылка на JavaScript: номер
- Дескрипторы свойств JavaScript
- Метод Object assign ()
- Метод Object create ()
- Метод Object defineProperties ()
- Метод Object defineProperty ()
- Метод записи объекта ()
- Метод Object freeze ()
- Метод Object getOwnPropertyDescriptor ()
- Метод Object getOwnPropertyDescriptors ()
- Метод Object getOwnPropertyNames ()
- Метод Object getOwnPropertySymbols ()
- Метод Object getPrototypeOf ()
- Метод Object is ()
- Метод Object isExtensible ()
- Метод Object isFrozen ()
- Метод Object isSealed ()
- Метод Object keys ()
- Метод Object preventExtensions ()
- Метод Object seal ()
- Метод Object setPrototypeOf ()
- Метод значений объекта ()
- Метод Object hasOwnProperty ()
- Метод Object isPrototypeOf ()
- Метод Object propertyIsEnumerable ()
- Метод Object toLocaleString ()
- Метод Object toString ()
- Метод Object valueOf ()
- Справка по JavaScript: объект
- Оператор присваивания JavaScript
- Интернационализация JavaScript
- Оператор типа JavaScript
- Новый оператор JavaScript
- Операторы сравнения JavaScript
- Правила приоритета операторов JavaScript
- Оператор instanceof в JavaScript
- Заявления JavaScript
- Область действия JavaScript
- Преобразования типов JavaScript (приведение)
- Операторы равенства JavaScript
- Условное выражение if / else в JavaScript
- Условное переключение JavaScript
- Оператор удаления JavaScript
- Параметры функции JavaScript
- Оператор распространения JavaScript
- Возвращаемые значения JavaScript
- Логические операторы JavaScript
- Тернарный оператор JavaScript
- Рекурсия JavaScript
- Свойства объекта JavaScript
- Объекты ошибок JavaScript
- Глобальный объект JavaScript
- Функция JavaScript filter ()
- Функция JavaScript map ()
- Функция JavaScript reduce ()
- Оператор `in` в JavaScript
- Операторы JavaScript
- Как получить значение свойства CSS в JavaScript
- Как добавить прослушиватель событий к нескольким элементам в JavaScript
- Поля частного класса JavaScript
- Как отсортировать массив по значению даты в JavaScript
- Поля открытого класса JavaScript
- Символы JavaScript
- Как использовать библиотеку JavaScript bcrypt
- Как переименовывать поля при деструктуризации объекта
- Как проверять типы в JavaScript без использования TypeScript
- Как проверить, содержит ли массив JavaScript определенное значение
- При чем тут оператор двойного отрицания !! делать в JavaScript?
- Какой оператор равенства следует использовать при сравнении JavaScript? == против ===
- Стоит ли изучать JavaScript?
- Как вернуть результат асинхронной функции в JavaScript
- Как проверить, пустой ли объект в JavaScript
- Как выйти из цикла for в JavaScript
- Как добавить элемент в массив по определенному индексу в JavaScript
- Почему не следует изменять прототип объекта JavaScript
- В чем разница между использованием let и var в JavaScript?
- Ссылки, используемые для активации функций JavaScript
- Как соединить две строки в JavaScript
- Как соединить два массива в JavaScript
- Как проверить, является ли значение JavaScript массивом?
- Как получить последний элемент массива в JavaScript?
- Как отправить urlencoded данные с помощью Axios
- Как получить дату завтрашнего дня с помощью JavaScript
- Как получить вчерашнюю дату с помощью JavaScript
- Как получить название месяца из даты JavaScript
- Как проверить, совпадают ли две даты в один и тот же день в JavaScript
- Как проверить, относится ли дата к дню в прошлом в JavaScript
- Операторы с пометкой JavaScript
- Как дождаться выполнения 2 или более обещаний в JavaScript
- Как получить дни между двумя датами в JavaScript
- Как загрузить файл с помощью Fetch
- Как отформатировать дату в JavaScript
- Как перебирать свойства объекта в JavaScript
- Как рассчитать количество дней между двумя датами в JavaScript
- Как использовать ожидание верхнего уровня в модулях ES
- Динамический импорт JavaScript
- Необязательная цепочка JavaScript
- Как заменить пробел внутри строки в JavaScript
- Нулевое объединение JavaScript
- Как сгладить массив в JavaScript
- Это десятилетие в JavaScript
- Как отправить заголовок авторизации с помощью Axios
- Список ключевых слов и зарезервированных слов в JavaScript
- Как преобразовать массив в строку в JavaScript
- Как удалить все содержимое папок node_modules
- Как удалить дубликаты из массива JavaScript
- Let vs Const в JavaScript
- Один и тот же вызов POST API в различных библиотеках JavaScript.
- Как получить первые n элементов массива в JS
- Как разделить массив на несколько равных частей в JS
- Как замедлить цикл в JavaScript
- Как загрузить изображение на холст HTML
- Как разрезать строку на слова в JavaScript
- Как разделить массив пополам в JavaScript
- Как написать текст на холсте HTML
- Как удалить последний символ строки в JavaScript
- Как удалить первый символ строки в JavaScript
- Как исправить ошибку TypeError: невозможно назначить только для чтения свойство «exports» объекта «# & lt; Object & gt;» ошибка
- Как создать всплывающее окно с намерением выхода
- Как проверить, является ли элемент потомком другого
- Как принудительно вводить учетные данные для каждого запроса Axios
- Как устранить ошибку "не функция" в JavaScript
- Гэтсби, как изменить фавикон
- Загрузка внешнего файла JS с помощью Gatsby
- Как определить темный режим с помощью JavaScript
- Посылка, как исправить ошибку `регенераторВремя выполнения не определено`
- Как определить, используется ли блокировщик рекламы с JavaScript
- Деструктуризация объектов с типами в TypeScript
- Справочник Deno: краткое введение в Deno 🦕
- Как получить последний сегмент пути или URL-адреса с помощью JavaScript
- Как перемешать элементы в массиве JavaScript
- Как проверить, существует ли ключ в объекте JavaScript
- Возбуждение событий и захват событий
- event.stopPropagation против event.preventDefault () против return false в событиях DOM
- Примитивные типы и объекты в JavaScript
- Как узнать, к какому типу относится значение в JavaScript?
- Как вернуть несколько значений из функции в JavaScript
- Стрелочные функции и обычные функции в JavaScript
- Как мы можем получить доступ к значению свойства объекта?
- В чем разница между null и undefined в JavaScript?
- В чем разница между методом и функцией?
- Как мы можем выйти из цикла в JavaScript?
- Цикл for..of в JavaScript
- Что такое деструктуризация объектов в JavaScript?
- Что такое подъем в JavaScript?
- Как заменить запятые на точки с помощью JavaScript
- Важность тайминга при работе с DOM
- Как перевернуть массив JavaScript
- Как проверить, является ли значение числом в JavaScript
- Как принять неограниченное количество параметров в функции JavaScript
- Объекты прокси JavaScript
- Делегирование событий в браузере с использованием ванильного JavaScript
- Ключевое слово JavaScript super
- Введение в XState
- Значения передаются по ссылке или по значению в JavaScript?
- Пользовательские события в JavaScript
- Пользовательские ошибки в JavaScript
- Пространства имен в JavaScript
- Любопытное использование запятых в JavaScript
- Цепочка вызовов методов в JavaScript
- Как справиться с отклонением обещаний
- Как поменять местами два элемента массива в JavaScript
- Как я исправил ошибку "cb.apply is not a function" при использовании Gitbook
- Как добавить элемент в начало массива в JavaScript
- Гэтсби, исправьте ошибку "не удается найти модуль gatsby-cli / lib / reporter"
- Как получить индекс элемента в массиве JavaScript
- Как проверить пустой объект в JavaScript
- Как деструктурировать объект до существующих переменных в JavaScript
- Структура данных JavaScript в виде массива
- Структура данных Stack JavaScript
- Структуры данных JavaScript: очередь
- Структуры данных JavaScript: Установить
- Структуры данных JavaScript: словари
- Структуры данных JavaScript: связанные списки
- JavaScript, как экспортировать функцию
- JavaScript, как экспортировать несколько функций
- JavaScript, как выйти из функции
- JavaScript, как найти символ в строке
- JavaScript, как фильтровать массив
- JavaScript, как расширить класс
- JavaScript, как найти дубликаты в массиве
- JavaScript, как заменить элемент массива
- Алгоритмы JavaScript: линейный поиск
- Алгоритмы JavaScript: двоичный поиск
- Алгоритмы JavaScript: сортировка выбора
- Алгоритмы JavaScript: быстрая сортировка
- Алгоритмы JavaScript: сортировка слиянием
- Алгоритмы JavaScript: пузырьковая сортировка