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
Proxy: Значение по умолчанию с ловушкой «get»
Чаще всего используются ловушки на чтение/запись свойств.
Чтобы перехватить операцию чтения,
Он срабатывает при попытке прочитать свойство объекта, с аргументами:
-
-
-
Давайте применим ловушку
Например, сделаем числовой массив, так чтобы при чтении из него несуществующего элемента возвращался
#разное #proxy #ловушки
Чаще всего используются ловушки на чтение/запись свойств.
Чтобы перехватить операцию чтения,
handler должен иметь метод get(target, property, receiver).Он срабатывает при попытке прочитать свойство объекта, с аргументами:
-
target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy,-
property – имя свойства,-
receiver – если свойство объекта является геттером, то receiver – это объект, который будет использован как this при его вызове. Обычно это сам объект прокси (или наследующий от него объект). Прямо сейчас нам не понадобится этот аргумент, подробнее разберём его позже.Давайте применим ловушку
get, чтобы реализовать «значения по умолчанию» для свойств объекта.Например, сделаем числовой массив, так чтобы при чтении из него несуществующего элемента возвращался
0.#разное #proxy #ловушки
👍11🔥2
Продвинутая реализация каррирования
Выше представлен "продвинутый" вариант функции каррирования.
Когда мы запускаем её, есть две ветви выполнения
1. Вызвать сейчас: если количество переданных аргументов
2. Частичное применение: в противном случае
На картинке выше показано, что произойдёт в случае
#разное #каррирование
Выше представлен "продвинутый" вариант функции каррирования.
Когда мы запускаем её, есть две ветви выполнения
if:1. Вызвать сейчас: если количество переданных аргументов
args совпадает с количеством аргументов при объявлении функции (func.length) или больше, тогда вызов просто переходит к ней.2. Частичное применение: в противном случае
func не вызывается сразу. Вместо этого, возвращается другая обёртка pass, которая снова применит curried, передав предыдущие аргументы вместе с новыми. Затем при новом вызове мы опять получим либо новое частичное применение (если аргументов недостаточно) либо, наконец, результат.На картинке выше показано, что произойдёт в случае
sum(a, b, c). У неё три аргумента, так что sum.length = 3.#разное #каррирование
👍4🔥1
Proxy: Валидация с ловушкой «set»
Допустим, мы хотим сделать массив исключительно для чисел. Если в него добавляется значение иного типа, то это должно приводить к ошибке.
Ловушка
-
-
-
-
-
Ловушка
#разное #proxy #ловушки
Допустим, мы хотим сделать массив исключительно для чисел. Если в него добавляется значение иного типа, то это должно приводить к ошибке.
Ловушка
set срабатывает, когда происходит запись свойства.-
set(target, property, value, receiver):-
target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy,-
property – имя свойства,-
value – значение свойства,-
receiver – аналогично ловушке get, этот аргумент имеет значение, только если свойство – сеттер.Ловушка
set должна вернуть true, если запись прошла успешно, и false в противном случае (будет сгенерирована ошибка TypeError).#разное #proxy #ловушки
👍10🔥2❤1
Строки, Intl.Collator
Intl.Collator - конструктор для «сортировщиков», которые представляют собой объекты, позволяющие сравнивать строки с учетом языка.
Общая проблема строк JavaScript – они «не в курсе» языка и особенностей стран, где находится посетитель.
При сравнении сравниваются коды символов, а это неправильно, к примеру, в русском языке оказывается, что
Intl.Collator решает все эти проблемы.
P.S. Результат
#разное #Intl #интернационализация
Intl.Collator - конструктор для «сортировщиков», которые представляют собой объекты, позволяющие сравнивать строки с учетом языка.
Общая проблема строк JavaScript – они «не в курсе» языка и особенностей стран, где находится посетитель.
При сравнении сравниваются коды символов, а это неправильно, к примеру, в русском языке оказывается, что
"ё" > "я" и "а" > "Я", хотя всем известно, что я – последняя буква алфавита и это она должна быть больше любой другой.Intl.Collator решает все эти проблемы.
P.S. Результат
compare имеет значение 1 (больше), 0 (равно) или -1 (меньше).#разное #Intl #интернационализация
👍6🔥1