Объект события доступен и в HTML
При назначении обработчика в HTML, тоже можно использовать объект
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так:
То есть, её первый аргумент называется
#браузер #документ #события
При назначении обработчика в HTML, тоже можно использовать объект
event.Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так:
function(event) { alert(event.type) }. То есть, её первый аргумент называется
"event", а тело взято из атрибута.#браузер #документ #события
👍9❤2🔥1
Можно использовать класс для обработки событий
Как видим, если
Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через
#браузер #документ #события
Как видим, если
addEventListener получает класс в качестве обработчика, он вызывает menu.handleEvent(event), когда происходит событие.Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через
addEventListener. Тогда объект menu будет получать события mousedown и mouseup, но не другие (не назначенные) типы событий.#браузер #документ #события
👍12❤2🔥1
Декомпозиция процесса обработки событий
Метод
Теперь обработка событий разделена по методам, что упрощает поддержку кода.
#браузер #документ #события
Метод
handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий (см. пример на картинке).Теперь обработка событий разделена по методам, что упрощает поддержку кода.
#браузер #документ #события
👍8🔥4
textContent: просто текст
Свойство
Как мы видим, возвращается только текст, как если бы все
На практике редко появляется необходимость читать текст таким образом.
Намного полезнее возможность записывать текст в
#браузер #документ #свойства_узлов
Свойство
textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше).Как мы видим, возвращается только текст, как если бы все
<теги> были вырезаны, но текст в них остался.На практике редко появляется необходимость читать текст таким образом.
Намного полезнее возможность записывать текст в
textContent, т.к. позволяет писать текст «безопасным способом».#браузер #документ #свойства_узлов
👍13❤1🔥1
Всплытие
Принцип всплытия очень простой.
Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Например, есть 3 вложенных элемента
Клик по внутреннему
- Сначала на самом
- Потом на внешнем
- Затем на внешнем
- И так далее вверх по цепочке до самого
Поэтому если кликнуть на
Этот процесс называется «всплытием», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.
#браузер #документ #всплытие
Принцип всплытия очень простой.
Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Например, есть 3 вложенных элемента
FORM > DIV > P с обработчиком на каждом.Клик по внутреннему
<p> вызовет обработчик onclick:- Сначала на самом
<p>.- Потом на внешнем
<div>.- Затем на внешнем
<form>.- И так далее вверх по цепочке до самого
document.Поэтому если кликнуть на
<p>, то мы увидим три оповещения: p → div → form.Этот процесс называется «всплытием», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.
#браузер #документ #всплытие
👍22❤3🔥2
Свойство
Всегда можно узнать, на каком конкретно элементе произошло событие.
Самый глубокий элемент, который вызывает событие, называется целевым элементом, и он доступен через
Отличия от
-
-
Например, если стоит только один обработчик
При этом внутри обработчика
-
-
#браузер #документ #всплытие
event.targetВсегда можно узнать, на каком конкретно элементе произошло событие.
Самый глубокий элемент, который вызывает событие, называется целевым элементом, и он доступен через
event.target.Отличия от
this (=event.currentTarget):-
event.target – это «целевой» элемент, на котором произошло событие, в процессе всплытия он неизменен.-
this – это «текущий» элемент, до которого дошло всплытие, на нём сейчас выполняется обработчик.Например, если стоит только один обработчик
form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента <form>, на котором сработает обработчик.При этом внутри обработчика
form.onclick:-
this (=event.currentTarget) всегда будет элемент <form>, так как обработчик сработал на ней.-
event.target будет содержать ссылку на конкретный элемент внутри формы, на котором произошёл клик.#браузер #документ #всплытие
👍16🔥3
Прекращение всплытия
Всплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента
Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.
Для этого нужно вызвать метод
Например, здесь (см. картинку) при клике на кнопку
#браузер #документ #всплытие
Всплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента
<html>, а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути.Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.
Для этого нужно вызвать метод
event.stopPropagation().Например, здесь (см. картинку) при клике на кнопку
<button> обработчик body.onclick не сработает.#браузер #документ #всплытие
👍12🔥3
Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷
Или писать личную СМСку, когда каждое слово видит клавиатурный шпион.
Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять.
Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К».
Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника?
Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab
Или писать личную СМСку, когда каждое слово видит клавиатурный шпион.
Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять.
Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К».
Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника?
Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab
👍2
event.stopImmediatePropagation()
Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.
То есть,
Для того, чтобы полностью остановить обработку, существует метод
#браузер #документ #всплытие
Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.
То есть,
event.stopPropagation() препятствует продвижению события дальше, но на текущем элементе все обработчики будут вызваны.Для того, чтобы полностью остановить обработку, существует метод
event.stopImmediatePropagation(). Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.#браузер #документ #всплытие
👍12🔥5
Не прекращайте всплытие без необходимости!
Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.
Зачастую прекращение всплытия через
Например:
1) Мы делаем вложенное меню. Каждое подменю обрабатывает клики на своих элементах и делает для них
2) Позже мы решили отслеживать все клики в окне для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Некоторые системы аналитики так делают. Обычно используют
3) Наша аналитика не будет работать над областью, где клики прекращаются
#браузер #документ #всплытие
Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.
Зачастую прекращение всплытия через
event.stopPropagation() имеет свои подводные камни, которые со временем могут стать проблемами.Например:
1) Мы делаем вложенное меню. Каждое подменю обрабатывает клики на своих элементах и делает для них
stopPropagation, чтобы не срабатывало внешнее меню.2) Позже мы решили отслеживать все клики в окне для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Некоторые системы аналитики так делают. Обычно используют
document.addEventListener('click'…), чтобы отлавливать все клики.3) Наша аналитика не будет работать над областью, где клики прекращаются
stopPropagation. Увы, получилась «мёртвая зона».#браузер #документ #всплытие
👍6🔥4
Погружение
Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»).
Она очень редко используется в реальном коде, однако тоже может быть полезной.
Стандарт DOM Events описывает 3 фазы прохода события:
1) Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
2) Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
3) Фаза всплытия (bubbling stage) – событие начинает всплывать.
Картинка из спецификации демонстрирует, как это работает при клике по ячейке
То есть при клике на
#браузер #документ #погружение
Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»).
Она очень редко используется в реальном коде, однако тоже может быть полезной.
Стандарт DOM Events описывает 3 фазы прохода события:
1) Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
2) Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
3) Фаза всплытия (bubbling stage) – событие начинает всплывать.
Картинка из спецификации демонстрирует, как это работает при клике по ячейке
<td>, расположенной внутри таблицы.То есть при клике на
<td> событие путешествует по цепочке родителей сначала вниз к элементу (погружается), затем оно достигает целевой элемент (фаза цели), а потом идёт наверх (всплытие), вызывая по пути обработчики.#браузер #документ #погружение
👍12🔥2
Отлов погружения
Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.
Обработчики, добавленные через
Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент
Существуют два варианта значений опции
Если аргумент
Если аргумент
Обратите внимание, что хоть и формально существует 3 фазы, 2-ую фазу («фазу цели»: событие достигло элемента) нельзя обработать отдельно, при её достижении вызываются все обработчики: и на всплытие, и на погружение.
#браузер #документ #погружение
Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.
Обработчики, добавленные через
on<event>-свойство или через HTML-атрибуты, или через addEventListener(event, handler) с двумя аргументами, ничего не знают о фазе погружения, а работают только на 2-ой и 3-ей фазах.Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент
capture (см. картинку выше).Существуют два варианта значений опции
capture:Если аргумент
false (по умолчанию), то событие будет поймано при всплытии.Если аргумент
true, то событие будет перехвачено при погружении.Обратите внимание, что хоть и формально существует 3 фазы, 2-ую фазу («фазу цели»: событие достигло элемента) нельзя обработать отдельно, при её достижении вызываются все обработчики: и на всплытие, и на погружение.
#браузер #документ #погружение
👍6🔥3
Чтобы убрать обработчик
Если мы добавили обработчик вот так
#браузер #документ #погружение
removeEventListener, нужна та же фазаЕсли мы добавили обработчик вот так
addEventListener(..., true), то мы должны передать то же значение аргумента capture в removeEventListener(..., true), когда снимаем обработчик.#браузер #документ #погружение
👍13🔥2
Пример: показать сообщение
Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем
Это был пример HTML. Далее мы будем создавать такой же
#браузер #документ #изменение
Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем
alert.Это был пример HTML. Далее мы будем создавать такой же
div, используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).#браузер #документ #изменение
👍4🔥3
matches
Предыдущие методы искали по DOM.
Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли
Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.
#браузер #документ #поиск
Предыдущие методы искали по DOM.
Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли
elem CSS-селектору, и возвращает true или false.Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.
#браузер #документ #поиск
👍10🔥1
Proxy
Объект
Прокси используются во многих библиотеках и некоторых браузерных фреймворках.
Синтаксис:
-
-
При операциях над
#разное #proxy
Объект
Proxy «оборачивается» вокруг другого объекта и может перехватывать (и, при желании, самостоятельно обрабатывать) разные действия с ним, например чтение/запись свойств и другие. Далее мы будем называть такие объекты «прокси».Прокси используются во многих библиотеках и некоторых браузерных фреймворках.
Синтаксис:
let proxy = new Proxy(target, handler);-
target – это объект, для которого нужно сделать прокси, может быть чем угодно, включая функции.-
handler – конфигурация прокси: объект с «ловушками» («traps»): методами, которые перехватывают разные операции, например, ловушка get – для чтения свойства из target, ловушка set – для записи свойства в target и так далее.При операциях над
proxy, если в handler имеется соответствующая «ловушка», то она срабатывает, и прокси имеет возможность по-своему обработать её, иначе операция будет совершена над оригинальным объектом target.#разное #proxy
👍14🔥2❤1
Proxy: ловушки
Чтобы активировать другие его возможности, добавим ловушки.
Для большинства действий с объектами в спецификации JavaScript есть так называемый «внутренний метод», который на самом низком уровне описывает, как его выполнять. Например,
Ловушки как раз перехватывают вызовы этих внутренних методов. Полный список методов, которые можно перехватывать, перечислен в спецификации Proxy, а также в таблице ниже.
Для каждого внутреннего метода в этой таблице указана ловушка, то есть имя метода, который мы можем добавить в параметр
P.S. На картинке отображена таблица со всеми доступными ловушками.
#разное #proxy #ловушки
Proxy – это особый объект, у него нет собственных свойств. С пустым handler он просто перенаправляет все операции на target.Чтобы активировать другие его возможности, добавим ловушки.
Для большинства действий с объектами в спецификации JavaScript есть так называемый «внутренний метод», который на самом низком уровне описывает, как его выполнять. Например,
[[Get]] – внутренний метод для чтения свойства, [[Set]] – для записи свойства, и так далее. Эти методы используются только в спецификации, мы не можем обратиться напрямую к ним по имени.Ловушки как раз перехватывают вызовы этих внутренних методов. Полный список методов, которые можно перехватывать, перечислен в спецификации Proxy, а также в таблице ниже.
Для каждого внутреннего метода в этой таблице указана ловушка, то есть имя метода, который мы можем добавить в параметр
handler при создании new Proxy, чтобы перехватывать данную операцию.P.S. На картинке отображена таблица со всеми доступными ловушками.
#разное #proxy #ловушки
👍14🔥2