Упрощенное объяснение распространения событий в JavaScript.

uproshhennoe obyasnenie rasprostraneniya sobytij v javascript

Представьте следующий сценарий:
Вы создаете список пользователей. Вы показываете их имена, любимые цвета и адреса электронной почты. Когда вы щелкните пользователя (одна строка в таблице), вы хотите перейти к записи пользователя. За исключением случаев, когда вы щелкните по электронной почте, появится диалоговое окно электронной почты.

Вы можете написать такой код (здесь мы используем таблицу, потому что ее легко понять, хотя, конечно, мы можем использовать что-то гораздо более сложное в нашем проекте):

<Table>
  <thead>
  <tr>
    <th>Name</th>
    <th>Colors</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Susie</td>
    <td>Blue, Red</td>
    <td>susie@hello.com</td>
  </tr>
  </tbody>
</Table>

Если бы вы хотели щелкнуть одну из этих строк, вы, вероятно, добавили бы onClick функцию в строку. Таким образом, если они щелкнут где угодно в строке, они смогут перейти прямо к записи пользователя.

WfjYnhCNEKvHMas6H81NXtfLzxbGod3elFwI

Чтобы позаботиться об электронной почте, мы сделаем <a href> тег на тексте.

Но подождите! Появится диалоговое окно электронной почты, но мы также переходим к записи пользователя. Это не то, что мы хотим! Как мы справимся с этим? Введите распространение события.

Распространение событий в двух словах.

Распространение событий – это способ описать «стек» событий, запускаемых в веб-браузере. В нашем примере таблицы выше, нажав на a тег является первым событием, которое мы запускаем, но есть и другие события.

Чтобы понять эту концепцию, вы должны понимать, что элементы веб-браузера вложены. Они не прикрывают друг друга. Итак, нажмите на a также щелкает строку, таблицу, div в которую вложена таблица, и что-нибудь другое на всем пути к document полный контейнер, содержащий все в вашем браузере.

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

Пузыри

Движение событий «вверх» от наиболее вложенного элемента ( a) к наименее вложенному ( document) называется «бульканием». Если события начинаются в самом «внешнем» элементе и перемещаются «вниз», это называется «протекание». Вероятно, все, что вас интересует, это по умолчанию поведение: бульканье.

Как использовать распространение событий в своих интересах

Честно говоря, не сталкивался любой сценарий использования для заботы о распространении событий до этой недели, когда мне нужно было создать таблицу с флажком в ней. К сожалению, когда я пытался настроить функцию проверки, это привело к записи. К счастью, я прошел некоторый тренинг раньше (см. ссылку ниже), который дал мне подсказку о том, что именно у меня есть для Google.

Вы, наверное, уже знаете, когда создаете onClick событие, оно передается любой функции, которую вы вызываете.

Итак, я смог написать:

handleCheck = e => {
  e.stopPropagation()
  // talk to my API, set the record as "done" or not
}
<span onClick={this.handleCheck}>[]</span>

что e.stopPropagation() останавливает это «бульканье» событий «вверх» через DOM. Мы останавливаем все остальные события в стеке. Прекрасно!

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

preventDefault против stopPropagation

Вы можете подумать: почему бы просто не использовать e.preventDefault()? Это действительно первое, что я попробовал, но для span просто нет поведения по умолчанию (в отличие от формы, поведение которой по умолчанию обновляет страницу).

Пример вырезания и вставки

Я много пишу в React, поэтому привожу пример в React. Но это будет работать так же в обычном старом HTML и JavaScript, используя любой метод, который у вас есть для добавления прослушивателей событий:

<div onClick={() => console.log('outer div')}>
  <div onClick={() => console.log('middle div')}>
    <div onClick={() => console.log('innermost div')}>
      Click me!
    </div>
  </div>
</div>

Распространение: пузыри без шампанского.

AVTLEJO9vPaFKX4HFoZadcla0fha-4kwghpQ
Журнал консоли для примера распространения события

Список литературы

  • Большая благодарность Весу Боссу, впервые познакомившему меня с этой концепцией на своем курсе #Javascript30. Я бы не имел понятия, что искать в Google, когда столкнулся с проблемой, указанной в примере таблицы выше, если бы я впервые не увидел ее во время курса.
  • Этот ответ Stack Overflow, хорошо суммирует некоторые из более тонких частей захвата и распространения событий.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *