From 408bdf774cfcb3e2ea42644beeb4b2fb83a6d636 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Mon, 3 Nov 2025 20:42:01 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to removeEventListener lesson (#63469) --- .../673369101e5c4a33db0e8a02.md | 144 ++++++++++++++++-- 1 file changed, 135 insertions(+), 9 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md b/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md index 75583938302..d85905a0878 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-does-the-removeeventlistener-method-work --- -# --description-- +# --interactive-- In the previous lesson, you learned how to work with `"click"` and `"input"` events by using the `addEventListener()` method. In this lesson, you will learn how to remove event listeners using the `removeEventListener()` method. @@ -29,29 +29,39 @@ Most of the time, you will only need to pass the event and listener arguments to Let's take a look at an example to better understand how the `removeEventListener()` method works: -In this example, we have heading, paragraph and button elements in the HTML: +Here is an example with some HTML: + +:::interactive_editor ```html +

Event Listener examples

-

MouseOver this text to remove the event listener

``` -Inside the CSS file, we are setting the `body` background color to grey: - ```css -body { - background-color: grey; +button { + background: linear-gradient(135deg, #4da3ff, #007bff); + color: white; + border: none; + padding: 12px 20px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: all 0.25s ease; + box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); } ``` +::: + If we want to toggle the background color between grey and blue, then we can use an event listener for that. -We first need to access the paragraph and button elements along with the `body` element: +We first need to access the `button` element along with the `body` element: ```js const bodyEl = document.querySelector("body"); -const para = document.getElementById("para"); const btn = document.getElementById("btn"); ``` @@ -74,11 +84,73 @@ Then we need to add an event listener to the `button` element to call the `toggl btn.addEventListener("click", toggleBgColor); ``` +Here is the full example so far: + +:::interactive_editor + +```html + +

Event Listener examples

+ + +``` + +```css +button { + background: linear-gradient(135deg, #4da3ff, #007bff); + color: white; + border: none; + padding: 12px 20px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: all 0.25s ease; + box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); +} + +button:hover { + background: linear-gradient(135deg, #66b3ff, #3399ff); + box-shadow: 0 6px 14px rgba(0, 123, 255, 0.3); + transform: translateY(-2px); +} +``` + +```js +const bodyEl = document.querySelector("body"); +const btn = document.getElementById("btn"); + +let isBgColorGrey = true; + +function toggleBgColor() { + bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey"; + isBgColorGrey = !isBgColorGrey; +} + +btn.addEventListener("click", toggleBgColor); +``` + +::: + + Each time the button is clicked, the background color of the body will change between grey and blue. +We can update the HTML to include a paragraph element that will be used to remove the event listener when hovered over: + +```html + +

Event Listener examples

+

MouseOver this text to remove the event listener

+ + +``` + To remove the event listener when the paragraph is hovered over, we can add an event listener to the paragraph element. We are using the `mouseover` event and passing in a function that removes the event listener from the `button` element: ```js +const para = document.getElementById("para"); +const btn = document.getElementById("btn"); + para.addEventListener("mouseover", () => { btn.removeEventListener("click", toggleBgColor); }); @@ -86,6 +158,60 @@ para.addEventListener("mouseover", () => { When the paragraph is hovered over, the event listener for the button click event is removed, and the background color will no longer change when the button is clicked. +Here is the full example with the `removeEventListener()` method: + +:::interactive_editor + +```html + +

Event Listener examples

+

MouseOver this text to remove the event listener

+ + +``` + +```css +button { + background: linear-gradient(135deg, #4da3ff, #007bff); + color: white; + border: none; + padding: 12px 20px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: all 0.25s ease; + box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); +} + +button:hover { + background: linear-gradient(135deg, #66b3ff, #3399ff); + box-shadow: 0 6px 14px rgba(0, 123, 255, 0.3); + transform: translateY(-2px); +} +``` + +```js +const bodyEl = document.querySelector("body"); +const para = document.getElementById("para"); +const btn = document.getElementById("btn"); + +let isBgColorGrey = true; + +function toggleBgColor() { + bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey"; + isBgColorGrey = !isBgColorGrey; +} + +btn.addEventListener("click", toggleBgColor); + +para.addEventListener("mouseover", () => { + btn.removeEventListener("click", toggleBgColor); +}); +``` + +::: + Real world examples of when to use the `removeEventListener()` method include removing event listeners when a modal is closed in a web application or when a user logs out of an application. # --questions--