Удаление обработчика события [Модуль 7: Обработка событий]: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь удалять обработчики событий, назначенные элементам HTML. Обработчики событий позволяют реагировать на действия пользователя, такие как клики, наведение курсора, нажатие клавиш и т.д. Умение корректно удалять обработчики важно для предотвращения утечек памяти и нежелательного поведения в динамических веб-приложениях. Вам будет предоставлен HTML-код, CSS (если необходимо) и JavaScript-код с пропусками. Ваша задача - заполнить пропуски, чтобы код корректно удалял назначенные обработчики событий. После ввода кода вы сможете выполнить его и увидеть результат.

Список тем

Удаление простого обработчика

id: 37051_remove-event-listener-1

Имеется кнопка. При нажатии на неё, к тексту добавляется фраза 'Привет!'. После нажатия на кнопку 'Удалить обработчик', обработчик события нажатия должен быть удален, и при последующих нажатиях на первую кнопку текст изменяться не должен.

HTML

Восстановить HTML

                      <button id="myButton">Нажми меня</button>
<button id="removeButton">Удалить обработчик</button>
<p id="myText"></p>

<button id="myButton">Нажми меня</button>
<button id="removeButton">Удалить обработчик</button>
<p id="myText"></p>

JavaScript

const myButton = document.getElementById("myButton");
const removeButton = document.getElementById("removeButton");
const myText = document.getElementById("myText");

function handleClick() {
  myText.textContent += "Привет! ";
}

myButton.addEventListener("click", handleClick);

removeButton.addEventListener("click", function() {
  myButton.input__1("click", input__2);
});

                     const myButton = document.getElementById("myButton");
const removeButton = document.getElementById("removeButton");
const myText = document.getElementById("myText");

function handleClick() {
  myText.textContent += "Привет! ";
}

myButton.addEventListener("click", handleClick);

removeButton.addEventListener("click", function() {
  myButton.input__1("click", input__2);
});

Используйте метод `removeEventListener()` для удаления обработчика. Убедитесь, что вы передаете в него те же аргументы (тип события и функцию-обработчик), что и при добавлении обработчика с помощью `addEventListener()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Удаление обработчика с анонимной функцией

id: 37051_remove-event-listener-2

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

HTML

Восстановить HTML

                      <button id="hoverButton">Наведи на меня</button>
<button id="removeHover">Удалить обработчик наведения</button>

<button id="hoverButton">Наведи на меня</button>
<button id="removeHover">Удалить обработчик наведения</button>

JavaScript

const hoverButton = document.getElementById("hoverButton");
const removeHover = document.getElementById("removeHover");

input__1 hoverHandler = function() {
  hoverButton.style.backgroundColor = "yellow";
};

hoverButton.addEventListener("mouseover", hoverHandler);

removeHover.addEventListener("click", function() {
  hoverButton.removeEventListener(input__2, input__3);
});

                     const hoverButton = document.getElementById("hoverButton");
const removeHover = document.getElementById("removeHover");

input__1 hoverHandler = function() {
  hoverButton.style.backgroundColor = "yellow";
};

hoverButton.addEventListener("mouseover", hoverHandler);

removeHover.addEventListener("click", function() {
  hoverButton.removeEventListener(input__2, input__3);
});

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

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Удаление всех обработчиков определенного типа

id: 37051_remove-event-listener-3

Кнопке назначено два обработчика события `click`. Один изменяет текст, другой меняет цвет фона. Необходимо удалить все обработчики события `click` при нажатии на другую кнопку.

HTML

Восстановить HTML

                      <button id="multiButton">Кликни меня</button>
<button id="removeAll">Удалить все обработчики</button>
<p id="multiText">Текст</p>

<button id="multiButton">Кликни меня</button>
<button id="removeAll">Удалить все обработчики</button>
<p id="multiText">Текст</p>

JavaScript

const multiButton = document.getElementById("multiButton");
const removeAll = document.getElementById("removeAll");
const multiText = document.getElementById("multiText");

function changeText() {
  multiText.textContent = "Новый текст";
}

function changeColor() {
  multiButton.style.backgroundColor = "red";
}

multiButton.addEventListener("click", changeText);
multiButton.addEventListener("click", changeColor);

removeAll.addEventListener("click", function() {
  const newButton = multiButton.input__1(input__2);
  multiButton.parentNode.replaceChild(newButton, input__3);
});

                     const multiButton = document.getElementById("multiButton");
const removeAll = document.getElementById("removeAll");
const multiText = document.getElementById("multiText");

function changeText() {
  multiText.textContent = "Новый текст";
}

function changeColor() {
  multiButton.style.backgroundColor = "red";
}

multiButton.addEventListener("click", changeText);
multiButton.addEventListener("click", changeColor);

removeAll.addEventListener("click", function() {
  const newButton = multiButton.input__1(input__2);
  multiButton.parentNode.replaceChild(newButton, input__3);
});

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

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Удаление обработчика события изменения

id: 37051_remove-event-listener-4

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

HTML

Восстановить HTML

                      <input type="text" id="myInput">
<p id="output"></p>
<button id="removeInput">Удалить обработчик</button>

<input type="text" id="myInput">
<p id="output"></p>
<button id="removeInput">Удалить обработчик</button>

JavaScript

const myInput = document.getElementById("myInput");
const output = document.getElementById("output");
const removeInputButton = document.getElementById("removeInput");

function handleInput() {
  output.textContent = myInput.value;
}

myInput.addEventListener(input__1, handleInput);

removeInputButton.addEventListener("click", () => {
  myInput.removeEventListener(input__2, input__3);
});

                     const myInput = document.getElementById("myInput");
const output = document.getElementById("output");
const removeInputButton = document.getElementById("removeInput");

function handleInput() {
  output.textContent = myInput.value;
}

myInput.addEventListener(input__1, handleInput);

removeInputButton.addEventListener("click", () => {
  myInput.removeEventListener(input__2, input__3);
});

Используйте `removeEventListener()` и укажите тип события `input`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Удаление обработчика с методом bind

id: 37051_remove-event-listener-5

Есть кнопка. При нажатии на нее выводится сообщение, содержащее переданный при привязке аргумент. Нужно удалить этот обработчик.

HTML

Восстановить HTML

                      <button id="bindButton">Нажми меня (bind)</button>
<button id="removeBind">Удалить обработчик (bind)</button>
<div id="bindOutput"></div>

<button id="bindButton">Нажми меня (bind)</button>
<button id="removeBind">Удалить обработчик (bind)</button>
<div id="bindOutput"></div>

JavaScript

const bindButton = document.getElementById("bindButton");
const removeBindButton = document.getElementById("removeBind");
const bindOutput = document.getElementById("bindOutput");

function showMessage(message) {
  bindOutput.textContent = message;
}

const boundFunction = showMessage.input__1(input__2, "Привет из bind!");

bindButton.addEventListener("click", boundFunction);

removeBindButton.addEventListener("click", function() {
  bindButton.removeEventListener(input__3, input__4);
});

                     const bindButton = document.getElementById("bindButton");
const removeBindButton = document.getElementById("removeBind");
const bindOutput = document.getElementById("bindOutput");

function showMessage(message) {
  bindOutput.textContent = message;
}

const boundFunction = showMessage.input__1(input__2, "Привет из bind!");

bindButton.addEventListener("click", boundFunction);

removeBindButton.addEventListener("click", function() {
  bindButton.removeEventListener(input__3, input__4);
});

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

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Удаление обработчика на изображении

id: 37051_remove-event-listener-6

При клике на изображение, оно должно менять свой src. После нажатия на кнопку 'Удалить', клик по изображению не должен приводить к смене картинки.

HTML

Восстановить HTML

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка 1">
<button id="removeImage">Удалить обработчик</button>

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка 1">
<button id="removeImage">Удалить обработчик</button>

JavaScript

const myImage = document.getElementById("myImage");
const removeImageButton = document.getElementById("removeImage");

function changeImage() {
  myImage.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";
}

myImage.addEventListener(input__1, changeImage);

removeImageButton.addEventListener("click", function() {
  myImage.input__2(input__3, input__4);
});

                     const myImage = document.getElementById("myImage");
const removeImageButton = document.getElementById("removeImage");

function changeImage() {
  myImage.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";
}

myImage.addEventListener(input__1, changeImage);

removeImageButton.addEventListener("click", function() {
  myImage.input__2(input__3, input__4);
});

Используйте `removeEventListener` для удаления обработчика события `click` с изображения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Удаление обработчика, добавленного через атрибут

id: 37051_remove-event-listener-7

Имеется кнопка с обработчиком события `onclick`, назначенным через HTML-атрибут. При нажатии на кнопку, она меняет свой текст. Необходимо удалить этот обработчик при нажатии на другую кнопку.

HTML

Восстановить HTML

                      <button id="attrButton" onclick="changeButtonText()">Нажми меня (атрибут)</button>
<button id="removeAttr">Удалить обработчик (атрибут)</button>

<button id="attrButton" onclick="changeButtonText()">Нажми меня (атрибут)</button>
<button id="removeAttr">Удалить обработчик (атрибут)</button>

JavaScript

const attrButton = document.getElementById("attrButton");
const removeAttrButton = document.getElementById("removeAttr");

function changeButtonText() {
  attrButton.textContent = "Текст изменен!";
}

removeAttrButton.addEventListener("click", function() {
  attrButton.input__1 = input__2;
});

                     const attrButton = document.getElementById("attrButton");
const removeAttrButton = document.getElementById("removeAttr");

function changeButtonText() {
  attrButton.textContent = "Текст изменен!";
}

removeAttrButton.addEventListener("click", function() {
  attrButton.input__1 = input__2;
});

Обработчики, добавленные через HTML-атрибуты, можно удалить, установив значение атрибута в `null`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Удаление обработчика с использованием this

id: 37051_remove-event-listener-8

Имеется кнопка. При нажатии на неё, она меняет свой цвет фона. Необходимо удалить этот обработчик, используя `this` внутри обработчика.

HTML

Восстановить HTML

                      <button id="thisButton">Изменить цвет (this)</button>

<button id="thisButton">Изменить цвет (this)</button>

JavaScript

const thisButton = document.getElementById("thisButton");

function changeButtonColor() {
  this.style.backgroundColor = "green";
    input__1.removeEventListener(input__2, input__3);
}

thisButton.addEventListener("click", changeButtonColor);

                     const thisButton = document.getElementById("thisButton");

function changeButtonColor() {
  this.style.backgroundColor = "green";
    input__1.removeEventListener(input__2, input__3);
}

thisButton.addEventListener("click", changeButtonColor);

Внутри обработчика события `this` ссылается на элемент, на котором это событие произошло. Используйте `this` для удаления обработчика.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку