Удаление обработчика события: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

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

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()`.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

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

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);
});

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

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Кнопке назначено два обработчика события `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`, но придется вызывать его для каждого обработчика отдельно, сохранив ссылки на них. Или же можно воспользоваться клонированием элемента, с заменой оригинала.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Имеется текстовое поле. При вводе текста в это поле, он дублируется под ним в параграфе. Необходимо удалить обработчик события `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

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

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`.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

При клике на изображение, оно должно менять свой 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` с изображения.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Имеется кнопка с обработчиком события `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

Имеется кнопка. При нажатии на неё, она меняет свой цвет фона. Необходимо удалить этот обработчик, используя `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` для удаления обработчика.

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

Результат

Лог

Выполнить

Отметить решенным

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