Начало работы с JavaScript События

Начало работы с JavaScript - События

Мы также подошли к шестой части вводной серии по JavaScript. Здесь мы обратим внимание на события. Благодаря событиям мы можем выполнить код в ключевой момент. Это может быть, когда пользователь делает что-то конкретное. Это также может быть, когда другой объект сообщает, что он «готов» с определенной функциональностью.

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

События JavaScript — одна из самых важных и часто используемых вещей в языке..

Один из самых простых, но неправильных способов — использовать следующий синтаксис:

function doSomething () {// тело функции}
window.onload = doSomething;

Сначала мы определяем функцию doSomething (). Затем мы назначаем его свойству onload объекта окна. Когда страница полностью загружена, объект окна генерирует событие загрузки. Он заставляет сам объект выполнить загрузку своего свойства, если это функция..

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

addEventListener

Более правильный способ, позволяющий связать несколько функций-обработчиков с одним событием, выглядит следующим образом:

function doSomething () {// тело функции}
function doSomethingElse () {// тело второй функции}
window.addEventListener (‘загрузка’, doSomething, истина); window.addEventListener (‘загрузка’, doSomethingElse, true);

Читать также:  Вкладки Часть 2 Глубокие ссылки

Сам метод addEventListener () принимает три аргумента:

  1. type — тип события
  2. слушатель — функция для выполнения
  3. useCapture — логическое значение (true / false), по умолчанию false.

Фазы событий

Захватывать

Захват — это фаза события, в которой вводятся элементы..

Давайте посмотрим на элементы как на коробки, в которых мы можем разместить другие.

Следующая структура:

div>
ul>
li>
a href = "#"> Щелкните / a>
/ li>
/ ul>
/ div>

можно сравнить с 4 матрешками.

Если мы попытаемся щелкнуть ссылку внутри, мышь сначала должна «пройти» по внешним элементам. Он даже сначала пройдет через самый внешний.

Если useCapture имеет значение true, функция будет выполняться при нажатии на div, затем на ul, затем на li и, наконец, на.

Пузырь

Как только мы добираемся до самого внутреннего элемента, начинается фаза пузыря. Он так называется, потому что идет наоборот — от самого внутреннего к самому внешнему элементу..

По умолчанию события запускаются в этом порядке. И если мы нажмем на ссылку, мы сможем сначала ее обработать. Только тогда придет li, затем ul и, наконец, div.

Объект мероприятия

Функции, которые выполняются во время события, автоматически получают аргумент для объекта события. Этот объект содержит информацию о:

  • тип события
  • который является самым внутренним элементом, который вызвал это
  • который является текущим элементом, которому мы фактически назначили обработчик
  • много другой информации, в зависимости от того, какое именно событие мы обрабатываем.
Читать также:  Объявления стилей CSS часть 2

функция eventInfo (e) {предупреждение (‘цель:’ + e.target.nodeName); alert (‘currentTarget:’ + e.currentTarget.nodeName); }
document.getElementById (‘div’). addEventListener (‘щелчок’, eventInfo); document.getElementById (‘a’). addEventListener (‘щелчок’, eventInfo);

В этом примере мы объявляем функцию eventInfo ().

Он принимает аргумент e. Это аббревиатура от event. Мы можем назвать аргумент в функции по-разному. Я лично привык всегда использовать e (как соглашение).

target и currentTarget

Функция показывает 2 сообщения. Первый предоставляет информацию о целевом объекте события..

target — это самый внутренний элемент, вызвавший событие. В событиях щелчка это элемент, который мы действительно щелкнули..

Во втором сообщении мы показываем объект currentTarget. Это объект, которому мы назначили прослушиватель событий..

В одном случае из примера оба сообщения будут ссылаться на ссылку. Однако в другом случае мы вернем информацию о ссылке в качестве цели, а затем о div в качестве currentTarget. Это потому, что мы установили addEventListener в div (следовательно, currentTarget).

С помощью document.getElementById (id) мы получаем доступ к элементу со страницы, которую мы загрузили. В качестве аргумента функции мы передаем строку с идентификатором элемента, который хотим выбрать. В этом случае мы предполагаем, что у нас есть div с id = "div" и a с id = "a". При нажатии на оба элемента мы вызываем одну и ту же функцию — eventInfo ().

Читать также:  Deep Linking Часть 3 Исправление для IE7

В этом случае мы не используем useCapture, что означает, что списки будут выполняться сначала для A-тега, а затем для DIV..

целью A-тега является сам тег A, поэтому e.target.nodeName имеет значение A.

currentTarget объект события — это тот же элемент, потому что для этого тега установлен прослушиватель событий..

После обработки событие переходит к родительскому элементу (DIV) во время фазы пузыря..

Функция вызывается с новой строки. целевой элемент — это A-тег, но на этот раз currentTarget — это DIV.

Результат: всплывающие окна со следующими подписями:

  • цель: A
  • currentTarget: A
  • цель: A
  • currentTarget: DIV

Если бы мы установили useCapture = true для обоих прослушивателей событий (на самом деле достаточно только для DIV), тогда его прослушиватель событий был бы выполнен первым, но целью оставалось бы A. В результате появятся всплывающие окна со следующими заголовками:

  • цель: A
  • currentTarget: DIV
  • цель: A
  • currentTarget: A
Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?