Событие - это сигнал о том, что что-то произошло. Возьмем, к примеру, индекс Google. Если пользователь нажимает «Поиск в Google», страница переключается на результаты поиска. Но! Как браузер узнает, что пользователь нажимает кнопку?
Мы можем добавить прослушиватель событий в то место, где мы щелкаем, поэтому, когда событие происходит («Пример: щелчок»), оно запускает функцию обработчика событий, которая также вызывала функцию обратного вызова. Наиболее частые события браузера, такие как мышь (щелчок, наведение, перемещение), клавиатура (нажатие, нажатие) и событие формы (отправка и фокус).
element.addEventListener(“event”, “event handler function”)
Мы также можем назначить объект в качестве обработчика, как в примере из информации JavaScript:
Зачем нам нужна функция обратного вызова?
Мы не знаем, когда пользователи нажимают кнопку, поэтому мы не можем использовать обычную функцию. Вот метафора, которая, я думаю, поможет вам понять, что такое обратный вызов. Когда вы идете в ресторан, вы говорите клерку, что, когда еда будет хорошо, пожалуйста, позвоните на пейджер. Итак, когда пейджер звонит (событие), это означает, что вы идете за едой. Это то же самое, что и функция обратного вызова, если событие произойдет, вызовите функцию.
Предотвратить событие по умолчанию
preventDefault() предназначен для предотвращения выполнения действия по умолчанию. Возможно, непросто понять, зачем нам это нужно и когда мы им пользуемся. Давайте рассмотрим пример. Когда мы хотим отправить форму, мы нажимаем кнопку отправки. Однако иногда нам нравится проверять значение формы. Если значение, которое вы хотите отправить, недействительно, форму не следует отправлять, как показано на фотографии. Итак, когда вы нажимаете «Отправить», он не работает нормально.
Создание пузырей и захват DOM, а также делегирование событий
Кроме добавления слушателя к элементам, нам нужно знать, как происходит передача события, потому что это очень важно для концепции делегирования событий.
Начнем сначала с делегирования мероприятия. На веб-странице, если у нас есть элементы, обрабатываемые аналогичным образом, то вместо добавления прослушивателя событий для каждого элемента мы можем поместить общий прослушиватель на их общего предка. Это не только экономия времени, но и повышение производительности вашего веб-приложения. Но как? Как браузер узнает, какой элемент нажат? Речь идет о пузырях и захватах.
Например, нам нравится составлять список дел, и к каждому пункту дел добавляется кнопка проверки и кнопка удаления.
В этом случае, когда мы нажимаем кнопку проверки, событие переходит от кнопки, которую мы нажали, к его родительскому элементу, поэтому узлы на этом пути знают, что кнопка проверки нажата, так же, как кнопка удаления. Вот почему нам нужно делегирование событий для добавления прослушивателя событий к общему предку, потому что это может упростить инициализацию и сэкономить память.
Весь путь события выглядит следующим образом: кнопка проверки ›родительский узел кнопки› общий предок
Если вы не хотите, чтобы событие всплывало в окно html, вы можете использовать stopPropagation(), чтобы событие не обрабатывалось во всем процессе. Кроме того, элемент может добавлять несколько прослушивателей событий, однако, если вы не хотите, чтобы выполнялись другие обработчики, вы можете использовать event.stopImmediatePropagation() для остановки других обработчиков.
Захват
Как правило, по умолчанию событие всплывает, и захват редко используется в реальном коде. Так что обычно это невидимо для нас. Захват событий начинается с верхнего элемента до целевого элемента.
Поток событий состоит из трех этапов: захвата, назначения и восходящей цепочки.
Понимание того, как работает событие, может помочь вам выполнять разные функции, например, если вы хотите, чтобы дочерний элемент не выполнял действия, если щелкнул его родительский узел, или как пример выполнения, упомянутый в статье.
Если вам понравилась эта статья, поделитесь со мной своим комментарием. Спасибо.
Ссылка на Lidemy и JavaScript info
