Visitar URL original
Event delegation by ockley · Pull Request #303 · javascript-tutorial/da.javascript.info · GitHub
Skip to content

Event delegation #303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ockley merged 2 commits into from
Sep 25, 2026
Merged

Event delegation #303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed93dba
Oversat til dansk
ockley Sep 25, 2026
b7bc7e3
Merge branch 'javascript-tutorial:master' into master
ockley Sep 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 30 additions & 34 deletions 2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,36 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="messages.css" />
<meta charset="utf-8" />
</head>

<head>
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
</head>

<body>

<div id="container">
<div class="pane">
<h3>Horse</h3>
<p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Donkey</h3>
<p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
<button class="remove-button">[x]</button>
<body>
<div id="container">
<div class="pane">
<h3>Heste</h3>
<p>Hesten er en af de to eksisterende underarter af Equus ferus. Det er et ulige tænket dyr, der tilhører taxonomifamilien Equidae. Hesten er udviklet over de sidste 45 til 55 millioner år fra en lille, flertået krop, Eohippus, til det store, enkelttåede dyr vi kender i dag.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Æslet</h3>
<p>Æslet er en domesticeret medlem af hestefamilien, Equidae. Den vilde forfader til æslen er den afrikanske vilde æsel, E. africanus. Æslen er blevet brugt som arbejdsdyr i mindst 5000 år.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Kat</h3>
<p>Katten (Latin: Felis catus) er et lille, typisk pelsdækket, kødæd mammal. De kaldes ofte huskatter, når de holdes som indendørs kæledyr, eller blot katter, når der ikke er behov for at skelne dem fra andre felider og feline. Katter er ofte værdifulde for mennesker på grund af deres evne til at jage uønskede dyr.</p>
<button class="remove-button">[x]</button>
</div>
</div>
<div class="pane">
<h3>Cat</h3>
<p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
</p>
<button class="remove-button">[x]</button>
</div>
</div>

<script>
container.onclick = function(event) {
if (event.target.className != 'remove-button') return;

let pane = event.target.closest('.pane');
pane.remove();
};
</script>
<script>
container.onclick = function (event) {
if (event.target.className != 'remove-button') return;

</body>
let pane = event.target.closest('.pane');
pane.remove();
};
</script>
</body>
</html>
56 changes: 26 additions & 30 deletions 2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,31 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="messages.css" />
<meta charset="utf-8" />
</head>

<head>
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
</head>

<body>

<div id="container">
<div class="pane">
<h3>Horse</h3>
<p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Donkey</h3>
<p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
<button class="remove-button">[x]</button>
<body>
<div id="container">
<div class="pane">
<h3>Heste</h3>
<p>Hesten er en af de to eksisterende underarter af Equus ferus. Det er et ulige tænket dyr, der tilhører taxonomifamilien Equidae. Hesten er udviklet over de sidste 45 til 55 millioner år fra en lille, flertået krop, Eohippus, til det store, enkelttåede dyr vi kender i dag.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Æslet</h3>
<p>Æslet er en domesticeret medlem af hestefamilien, Equidae. Den vilde forfader til æslen er den afrikanske vilde æsel, E. africanus. Æslen er blevet brugt som arbejdsdyr i mindst 5000 år.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Kat</h3>
<p>Katten (Latin: Felis catus) er et lille, typisk pelsdækket, kødæd mammal. De kaldes ofte huskatter, når de holdes som indendørs kæledyr, eller blot katter, når der ikke er behov for at skelne dem fra andre felider og feline. Katter er ofte værdifulde for mennesker på grund af deres evne til at jage uønskede dyr.</p>
<button class="remove-button">[x]</button>
</div>
</div>
<div class="pane">
<h3>Cat</h3>
<p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
</p>
<button class="remove-button">[x]</button>
</div>
</div>

<script>
// ...your code...
</script>

</body>
<script>
// ...din kode...
</script>
</body>
</html>
8 changes: 4 additions & 4 deletions 2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ importance: 5

---

# Hide messages with delegation
# Skjul meddelelser med delegation

There's a list of messages with removal buttons `[x]`. Make the buttons work.
Der er en liste over meddelelser med knapper til at skjule dem `[x]`. Få knapperne til at virke.

Like this:
Som dette:

[iframe src="solution" height=420]

P.S. Should be only one event listener on the container, use event delegation.
P.S. Der skal kun være en event listener på containeren, brug event delegation.
6 changes: 3 additions & 3 deletions 2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
The solution has two parts.
Løsningen har to dele.

1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
1. Pak alle træ-noder ind i `<span>`-elementer. På den måde kan vi CSS-style dem via `:hover` og håndtere klik direkte på teksten, fordi `<span>`-bredden er præcis den samme som tekstbredden.
2. sæt en handler på træets rod-node og håndter klik på de enkelte `<span>`-titler.
144 changes: 73 additions & 71 deletions 2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,82 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<style>
.tree span:hover {
font-weight: bold;
}

<head>
<style>
.tree span:hover {
font-weight: bold;
}

.tree span {
cursor: pointer;
}
</style>
<meta charset="utf-8">
</head>

<body>

<ul class="tree" id="tree">
<li>Animals
<ul>
<li>Mammals
<ul>
<li>Cows</li>
<li>Donkeys</li>
<li>Dogs</li>
<li>Tigers</li>
</ul>
</li>
<li>Other
<ul>
<li>Snakes</li>
<li>Birds</li>
<li>Lizards</li>
</ul>
</li>
</ul>
</li>
<li>Fishes
<ul>
<li>Aquarium
<ul>
<li>Guppy</li>
<li>Angelfish</li>
</ul>
</li>
<li>Sea
<ul>
<li>Sea trout</li>
</ul>
</li>
</ul>
</li>
</ul>

<script>
// move all text into <span>
// they occupy exactly the place necessary for the text,
for (let li of tree.querySelectorAll('li')) {
let span = document.createElement('span');
li.prepend(span);
span.append(span.nextSibling); // move the text node into span
}
.tree span {
cursor: pointer;
}
</style>
<meta charset="utf-8" />
</head>

// catch clicks on whole tree
tree.onclick = function(event) {
<body>
<ul class="tree" id="tree">
<li>
Dyr
<ul>
<li>
Pattedyr
<ul>
<li>Køer</li>
<li>Aber</li>
<li>Hunde</li>
<li>Tigre</li>
</ul>
</li>
<li>
Andet
<ul>
<li>Slanger</li>
<li>Fugle</li>
<li>Øgler</li>
</ul>
</li>
</ul>
</li>
<li>
Fisk
<ul>
<li>
Akvarium
<ul>
<li>Guppy</li>
<li>Skalare</li>
</ul>
</li>
<li>
Havet
<ul>
<li>Havørred</li>
</ul>
</li>
</ul>
</li>
</ul>

if (event.target.tagName != 'SPAN') {
return;
<script>
// move all text into <span>
// they occupy exactly the place necessary for the text,
for (let li of tree.querySelectorAll('li')) {
let span = document.createElement('span');
li.prepend(span);
span.append(span.nextSibling); // move the text node into span
}

let childrenContainer = event.target.parentNode.querySelector('ul');
if (!childrenContainer) return; // no children
// catch clicks on whole tree
tree.onclick = function (event) {
if (event.target.tagName != 'SPAN') {
return;
}

childrenContainer.hidden = !childrenContainer.hidden;
}
</script>
let childrenContainer = event.target.parentNode.querySelector('ul');
if (!childrenContainer) return; // no children

</body>
childrenContainer.hidden = !childrenContainer.hidden;
};
</script>
</body>
</html>
Loading