Загрузка...

Обработчики событий

В гардеробе одна вешалка. Кнопка — #peg, на ней написано hang. Под ней #ticket пока говорит blank.
Прошлая страница была звонок и свойство onclick. Там было одно место. Вторая функция вытесняла первую. Здесь это свойство не пишем. typeof и this тоже с той страницы.
Эта страница про addEventListener. Вызов кладёт функцию в список клика кнопки. Та же строка её не запускает. Бирка остаётся blank, пока не вызовешь peg.click().
Сначала wool, потом silk. Вторая не отодвигает первую. Один клик запускает обе: сначала wool, затем silk. Бирка становится wool silk. Надпись на кнопке остаётся hang.
Если передать ту же функцию wool дважды, второй раз ничего не добавится. Один клик — один запуск.
removeEventListener снимает ту функцию, которую добавил ты. Новая функция, даже с теми же строками, — другой объект. wool остаётся.
Скрипт страницы добавляет обе и кликает один раз. Строка под вешалкой: wool silk / 2 / peg. Элемент здесь не создаём, стиль не пишем и аргумент события не читаем. Это следующая страница.

Два крючка, не одно место

getElementById даёт только кнопку и абзац бирки. Каждый вызов addEventListener может поставить ещё одного слушателя рядом. Клик проходит список с начала до конца. Эти функции не принимают параметр. Объект события — следующая страница.

Кто слушает

Кнопка начинает с hang, под ней blank. Читай строки по порядку. Каждый фрагмент стартует со свежей кнопки, кроме строки страницы: это демо внизу. Демо никого не снимает.

📊 Кто слушает

Момент Кто слушает Текст бирки Легко перепутать
click, слушателя ещё нет никто blank пустой клик пишет wool
addEventListener для wool, до click wool blank само добавление пишет wool
click только с wool wool wool текст кнопки становится wool
сначала wool, потом silk, один click оба, wool затем silk wool silk работает только второй
removeEventListener для wool, затем click silk silk всё ещё работают оба
скрипт страницы, один click оба wool silk строка кончается на hang

addEventListener("click", wool) ставит wool в конец списка клика. wool он не вызывает. peg.click() шлёт клик и проходит список с начала. Собственный текст кнопки не меняется.
silk, добавленный следом, садится за wool. Оба работают. Порядок — это порядок добавления.
Один и тот же объект функции дважды не добавляется. peg.addEventListener("click", wool) и затем та же строка оставляют список из одного. Один клик запускает wool один раз. parts.length равен 1, бирка — wool.
removeEventListener("click", wool) снимает этот объект. silk остаётся, если ты его добавил. Новая функция, которая тоже делает push строки "wool", не совпадает. После peg.removeEventListener("click", function () { parts.push("wool"); }) исходный wool всё ещё в списке. Клик по-прежнему пишет wool.
join(" ") только ставит пробел между словами, которые уже лежат в parts. Пустой список здесь не склеиваем. Бирка начинается со слова blank и меняется только внутри слушателя.

Пока никто не слушает

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

Тихая вешалка

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);

Журналы: blank и hang. Список клика был пуст. Абзац не изменился.

Слушатель ждёт

addEventListener хранит wool. Тело на этой строке не выполняется. parts пуст, бирка blank, кнопка всё ещё говорит hang.

Добавить, не запускать

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Журналы: blank, 0 и hang. wool в списке. Его никто не вызвал, поэтому в parts нет слова.

click запускает тех, кто в списке

Этот фрагмент снова начинается со свежей кнопки. Добавляется только wool, затем peg.click(). Бирка становится wool. Текст кнопки остаётся hang. parts.length равен 1.

Один слушатель

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);
console.log(parts.length);

Журналы: wool, hang и 1. Один слушатель, одно слово. hang по-прежнему на кнопке.

silk садится рядом с wool

Свежая кнопка. Сначала wool, потом silk, и только затем один click. Между двумя добавлениями клика нет. wool кладёт "wool" и пишет его. silk кладёт "silk" и пишет оба слова через пробел. Бирка — wool silk. parts.length равен 2. Кнопка остаётся hang.

Работают оба

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Журналы: wool silk, 2 и hang. silk не стёр wool. Один клик прошёл список в порядке добавления.

Снять wool с вешалки

Свежая кнопка. Обе функции добавлены, затем removeEventListener вызывается с той же функцией wool. silk остаётся. Один click запускает только silk. Бирка — silk, не wool silk. parts.length равен 1.

Снять wool

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.removeEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Журналы: silk, 1 и hang. wool был тем самым объектом, который ты добавил, поэтому ушёл из списка. Демо внизу никого не снимает.

Одна строка под вешалкой

Скрипт стоит в конце body, когда кнопка и абзацы уже есть. Он добавляет wool, затем silk и один раз вызывает click. Каждая функция прибавляет 1 к hits и кладёт своё слово. Строка склеивает текст бирки, счётчик и peg.id. Текст кнопки она не пишет. Аргумент события не читает.

Демо страницы — вешалка

html 
<!DOCTYPE html>
<html>
<head>
<title>event-listeners — page</title>
</head>
<body>
<button id="peg" type="button">hang</button>
<p id="ticket">blank</p>
<p id="line">…</p>
<script>
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
let hits = 0;
function wool() {
hits = hits + 1;
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
hits = hits + 1;
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
document.getElementById("line").textContent =
ticket.textContent + " / " + hits + " / " + peg.id;
</script>
</body>
</html>

Строка такая: wool silk / 2 / peg. Бирка — wool silk, не blank. Счётчик равен 2, потому что оба слушателя сработали на одном клике. Последнее слово — id кнопки, peg.id, не слово hang. На кнопке по-прежнему hang. Следующая страница — объект события. Она читает аргумент, который эти функции не принимают.

Пять проверок у вешалки

  1. Кликни без слушателя. Бирка blank, кнопка hang.
  2. Добавь wool и не кликай. Бирка blank, parts.length равен 0, кнопка hang.
  3. Добавь wool и кликни. Бирка wool, кнопка hang, parts.length равен 1.
  4. Добавь wool, затем silk, и кликни один раз. Бирка wool silk, parts.length равен 2, кнопка hang.
  5. Добавь обоих, сними wool и кликни. Бирка silk, parts.length равен 1, кнопка hang. Прочитай строку страницы: wool silk / 2 / peg.

Где эта вешалка обманывает

На кнопке по-прежнему hang. В списке были обе функции, или только silk, или никто.

  • Ждать, что второй addEventListener заменит первый, как это делал onclick
  • Ждать, что сам addEventListener запишет на бирку wool
  • Ждать, что при обоих добавленных сработает только silk
  • Ждать, что текст кнопки станет wool
  • Ждать, что removeEventListener с новой функцией снимет wool
  • Добавить ту же функцию wool дважды и ждать двух запусков
  • Читать здесь onclick, typeof null или this.id; это была страница звонка
  • Читать здесь event.target; эти функции не принимают аргумент, объект события — следующая страница
  • Строить кнопку через createElement; это была более ранняя страница
  • Читать строку как blank / 0 / hang

Что остаётся

  • Без слушателя peg.click() оставляет бирку blank и кнопку hang
  • addEventListener держит бирку blank до click
  • Один клик только с wool ставит бирку в wool и оставляет кнопку hang
  • wool, затем silk, затем один клик ставят бирку в wool silk
  • removeEventListener с тем же wool и затем клик ставят бирку в silk
  • Тот же wool, добавленный дважды, запускается один раз, новая функция его не снимает
  • Строка страницы: wool silk / 2 / peg

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 50 из 52
Javascript Урок