diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html index 6f8ed9c4d..ae31e2e08 100644 --- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html +++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html @@ -1,40 +1,36 @@ - + + + + + - - - - - - - -
-
-

Horse

-

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.

- -
-
-

Donkey

-

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.

- + +
+
+

Heste

+

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.

+ +
+
+

Æslet

+

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

+ +
+
+

Kat

+

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.

+ +
-
-

Cat

-

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

- -
-
- - + + diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html index 8a9ed9a09..fb03fcc3a 100644 --- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html +++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html @@ -1,35 +1,31 @@ - + + + + + - - - - - - - -
-
-

Horse

-

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.

- -
-
-

Donkey

-

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.

- + +
+
+

Heste

+

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.

+ +
+
+

Æslet

+

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

+ +
+
+

Kat

+

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.

+ +
-
-

Cat

-

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

- -
-
- - - + + diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md index 62c0a8ab0..f20778ca3 100644 --- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md +++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md @@ -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. diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md index 09c14a08c..d6a5681f1 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md +++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md @@ -1,4 +1,4 @@ -The solution has two parts. +Løsningen har to dele. -1. Wrap every tree node title into ``. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `` width is exactly the text width (unlike without it). -2. Set a handler to the `tree` root node and handle clicks on that `` titles. +1. Pak alle træ-noder ind i ``-elementer. På den måde kan vi CSS-style dem via `:hover` og håndtere klik direkte på teksten, fordi ``-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 ``-titler. diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html index 0e85e457e..23053ac20 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html +++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html @@ -1,80 +1,82 @@ - + + + - - - - - -
    -
  • Animals -
      -
    • Mammals -
        -
      • Cows
        • -
      • Donkeys
        • -
      • Dogs
        • -
      • Tigers
        • -
      -
      • -
    • Other -
        -
      • Snakes
        • -
      • Birds
        • -
      • Lizards
        • -
      -
      • -
    -
    • -
  • Fishes -
      -
    • Aquarium -
        -
      • Guppy
        • -
      • Angelfish
        • -
      -
      • -
    • Sea -
        -
      • Sea trout
        • -
      -
      • -
    -
    • -
- - + let childrenContainer = event.target.parentNode.querySelector('ul'); + if (!childrenContainer) return; // no children - + childrenContainer.hidden = !childrenContainer.hidden; + }; + + diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html b/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html index 8572517f2..2353c2b9f 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html +++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html @@ -1,46 +1,50 @@ - + - - - - - -
    -
  • Animals -
      -
    • Mammals -
        -
      • Cows
        • -
      • Donkeys
        • -
      • Dogs
        • -
      • Tigers
        • -
      -
      • -
    • Other -
        -
      • Snakes
        • -
      • Birds
        • -
      • Lizards
        • -
      -
      • -
    -
    • -
  • Fishes -
      -
    • Aquarium -
        -
      • Guppy
        • -
      • Angelfish
        • -
      -
      • -
    • Sea -
        -
      • Sea trout
        • -
      -
      • -
    -
    • -
- - + + + + +
    +
  • + Dyr +
      +
    • + Pattedyr +
        +
      • Køer
        • +
      • Aber
        • +
      • Hunde
        • +
      • Tigre
        • +
      +
      • +
    • + Andet +
        +
      • Slanger
        • +
      • Fugle
        • +
      • Øgler
        • +
      +
      • +
    +
    • +
  • + Fisk +
      +
    • + Akvarium +
        +
      • Guppy
        • +
      • Skalare
        • +
      +
      • +
    • + Havet +
        +
      • Havørred
        • +
      +
      • +
    +
    • +
+ diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md index bdcf2a510..574addbeb 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md +++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md @@ -2,13 +2,13 @@ importance: 5 --- -# Tree menu +# Træ-menu -Create a tree that shows/hides node children on click: +Opret et træ, der viser/skjuler "node-børn" ved klik: [iframe border=1 src="solution"] -Requirements: +Krav til løsningen: -- Only one event handler (use delegation) -- A click outside the node title (on an empty space) should not do anything. +- Kun en event handler (brug delegation) +- Et klik uden for node-titlen (på et tomt område) bør ikke gøre noget. diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html b/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html index d5d2d640b..22f3c5bc9 100644 --- a/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html +++ b/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html @@ -1,98 +1,95 @@ - + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AlderNavn
5John
2Pete
12Ann
9Eugene
1Ilya
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AgeName
5John
2Pete
12Ann
9Eugene
1Ilya
+ - - + + diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html b/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html index 8fac06246..c1f866e9a 100644 --- a/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html +++ b/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html @@ -1,61 +1,59 @@ - + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AlderNavn
5John
2Pete
12Ann
9Eugene
1Ilya
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AgeName
5John
2Pete
12Ann
9Eugene
1Ilya
- - - - + + diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md index ec85a473c..1f82a3916 100644 --- a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md +++ b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md @@ -2,19 +2,19 @@ importance: 4 --- -# Sortable table +# Sorterbare tabeller -Make the table sortable: clicks on `` elements should sort it by corresponding column. +Gør tabellen sorterbare: klik på ``-elementer skal sortere den efter den tilsvarende kolonne. -Each `` has the type in the attribute, like this: +Hver `` har typen i attributten, som dette: ```html *!* - - + + */!* @@ -32,12 +32,12 @@ Each `
AgeNameAlderNavn
` has the type in the attribute, like this:
``` -In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type. +I eksemplet ovenfor har den første kolonne tal, og den anden har -- strenge. Sorteringsfunktionen bør håndtere sortering i forhold til typen. -Only `"string"` and `"number"` types should be supported. +Kun typerne `"string"` og `"number"` skal understøttes. -The working example: +Et virkende eksempel: [iframe border=1 src="solution" height=190] -P.S. The table can be big, with any number of rows and columns. +P.S. Tabellen kan være stor, med et hvilket som helst antal rækker og kolonner. diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html index 1ef37cdc9..aa05ce523 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html @@ -1,80 +1,75 @@ - + + + + - - - - -

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

-

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

- - - - -

Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.

+ .tooltip { + position: fixed; + padding: 10px 20px; + border: 1px solid #b3c9ce; + border-radius: 4px; + text-align: center; + font: italic 14px/1.3 sans-serif; + color: #333; + background: #fff; + box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); + } + + + +

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

+

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

- + tooltipElem.style.left = left + 'px'; + tooltipElem.style.top = top + 'px'; + }; - + document.onmouseout = function (e) { + if (tooltipElem) { + tooltipElem.remove(); + tooltipElem = null; + } + }; + + diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html index add3b2144..05f168dc9 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html @@ -1,43 +1,39 @@ - + - - - - - - - - -

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

-

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

- - - - -

Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.

- - - - - + + + + + + +

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

+

LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

+ + + + +

Scroll siden for at få knapperne til at blive vist øverst. Tjek om dine tooltip vises korrekt.

+ + + diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 3001b9915..d6ba367e5 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md @@ -2,37 +2,37 @@ importance: 5 --- -# Tooltip behavior +# Tooltip adfærd -Create JS-code for the tooltip behavior. +Skriv JavaScrip kode for en tooltip-adfærd. -When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide. +Når en mus kommer over et element med `data-tooltip`, skal tooltippen vises over det, og når den er væk, skal den blive skjult. -An example of annotated HTML: +Et eksempel på hvordan det ser ud i HTML: ```html - - + + ``` -Should work like this: +Den skal virke således: [iframe src="solution" height=200 border=1] -In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet). +I denne opgave antager vi, at alle elementer med `data-tooltip` kun har tekst indeni. Ingen indlejrede tags (endnu). -Details: +Detaljer: -- The distance between the element and the tooltip should be `5px`. -- The tooltip should be centered relative to the element, if possible. -- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it. -- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML. +- Afstanden mellem elementet og tooltippen skal være `5px`. +- Dit tooltip skal være centreret i forhold til elementet, hvis det er muligt. +- Dit tooltip skal ikke krydse vindueskanterne. Normalt skal det være over elementet, men hvis elementet er øverst på siden og der ikke er plads til tooltippen, så skal den være under det. +- Indholdet af tooltippen er givet i attributten `data-tooltip`. Det kan være vilkårlig HTML. -You'll need two events here: -- `mouseover` triggers when a pointer comes over an element. -- `mouseout` triggers when a pointer leaves an element. +Du har brug for to events: +- `mouseover` trigger når musen kommer over et element. +- `mouseout` trigger når musen forlader et element. -Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there. +Bemærk: Du skal bruge event delegation, dvs. du skal sætte to handlere på `document` for at følge alle "overs" og "outs" fra elementer med `data-tooltip` og håndtere dine tooltip derfra. -After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements. +Efter adfærden er implementeret, kan alle mennesker, også de, der ikke er vant til JavaScript, tilføje annoterede elementer. -P.S. Only one tooltip may show up at a time. +P.S. Kun en tooltip kan vises ad gangen. diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 881183740..ec2331c8c 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -1,19 +1,19 @@ -# Event delegation +# Delegering af events -Capturing and bubbling allow us to implement one of the most powerful event handling patterns called *event delegation*. +Capturing og bubbling tillader os at implementere en af de mest kraftfulde event håndteringsmønstre kaldet *event delegation*. -The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor. +Ideen er, at hvis vi har mange elementer, der håndteres ens kan vi, i stedet for at tildele en handler til hvert enkelt element, sætte en enkelt handler på deres fælles forælder. -In the handler we get `event.target` to see where the event actually happened and handle it. +I handleren bruger vi så `event.target` til at se hvor eventet faktisk skete og håndtere det. -Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy. +Lad os se på et eksempel -- [Ba-Gua diagrammet](http://en.wikipedia.org/wiki/Ba_gua) afspejler en gammel kinesisk filosofi. -Here it is: +Her er den: [iframe height=350 src="bagua" edit link] -The HTML is like this: +HTML koden er som følger: ```html @@ -25,50 +25,50 @@ The HTML is like this: - ...2 more lines of this kind... - ...2 more lines of this kind... + ...2 linjer mere af samme slags... + ...2 linjer mere af samme slags...
... ...
``` -The table has 9 cells, but there could be 99 or 9999, doesn't matter. +Tabellen har 9 celler, men der kan være 99 eller 9999, det spiller ingen rolle. -**Our task is to highlight a cell `` on click.** +**Vores opgave er at fremhæve en celle `` ved klik.** -Instead of assign an `onclick` handler to each `` (can be many) -- we'll setup the "catch-all" handler on `` element. +I stedet for at tildele en `onclick` handler til hver `
` (kan være mange) -- vil vi opsætte den "catch-all" handler på `` elementet. -It will use `event.target` to get the clicked element and highlight it. +Det vil bruge `event.target` til at få det klikkede element og fremhæve det. -The code: +Koden er som følger: ```js let selectedTd; *!* table.onclick = function(event) { - let target = event.target; // where was the click? + let target = event.target; // hvor blev der klikket? - if (target.tagName != 'TD') return; // not on TD? Then we're not interested + if (target.tagName != 'TD') return; // ikke et TD? Så er vi ikke interesserede - highlight(target); // highlight it + highlight(target); // fremhæv den }; */!* function highlight(td) { - if (selectedTd) { // remove the existing highlight if any + if (selectedTd) { // fjern den eksisterende fremhævning, hvis der er en selectedTd.classList.remove('highlight'); } selectedTd = td; - selectedTd.classList.add('highlight'); // highlight the new td + selectedTd.classList.add('highlight'); // fremhæv den nye td } ``` -Such a code doesn't care how many cells there are in the table. We can add/remove `
` dynamically at any time and the highlighting will still work. +Sådan en kode er meget effektiv og fungerer uanset hvor mange celler der er i tabellen. Vi kan tilføje/fjerne `` dynamisk når som helst og fremhævningen vil stadig fungere. -Still, there's a drawback. +Men der er en ulempe. -The click may occur not on the ``, but inside it. +Klikket kan opstå inde i ``, i stedet for på selve `` tag'et. -In our case if we take a look inside the HTML, we can see nested tags inside ``, like ``: +Hvis vi tager et kig i HTML'en, kan vi se indlejrede tags inde i ``, som f.eks. ``: ```html @@ -79,13 +79,13 @@ In our case if we take a look inside the HTML, we can see nested tags inside ` ``` -Naturally, if a click happens on that `` then it becomes the value of `event.target`. +Hvis der sker et klik på det indlejrede `` så bliver det den værdi, som `event.target` får. ![](bagua-bubble.svg) -In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `` or not. +I handleren `table.onclick` skal vi tage sådan en `event.target` og finde ud af, om klikket var inde i `` eller ikke. -Here's the improved code: +Her er den forbedrede kode: ```js table.onclick = function(event) { @@ -99,27 +99,29 @@ table.onclick = function(event) { }; ``` -Explanations: -1. The method `elem.closest(selector)` returns the nearest ancestor that matches the selector. In our case we look for `` on the way up from the source element. -2. If `event.target` is not inside any ``, then the call returns immediately, as there's nothing to do. -3. In case of nested tables, `event.target` may be a ``, but lying outside of the current table. So we check if that's actually *our table's* ``. -4. And, if it's so, then highlight it. +Forklaringer: +1. Metoden `elem.closest(selector)` returnerer den nærmeste forælder, der matcher selectoren. I vores tilfælde leder vi efter `` på vejen op fra event.target. +2. Hvis `event.target` ikke er inde i nogen ``, så returnerer kaldet umiddelbart, da der ikke er noget at gøre. +3. I tilfælde af indlejrede tabeller kan `event.target` være en ``, men ligge uden for den aktuelle tabel. Så her tjekker vi, om det faktisk er *vores tabels* `` eller ej. +4. Og hvis det er tilfældet, så fremhæver vi den. -As the result, we have a fast, efficient highlighting code, that doesn't care about the total number of `` in the table. -## Delegation example: actions in markup -There are other uses for event delegation. +Resultatet er en hurtig og effektiv fremhævningskode, der ikke bekymrer sig om det samlede antal `` i tabellen. -Let's say, we want to make a menu with buttons "Save", "Load", "Search" and so on. And there's an object with methods `save`, `load`, `search`... How to match them? +## Eksempel på event delegation: Handlinger i markup -The first idea may be to assign a separate handler to each button. But there's a more elegant solution. We can add a handler for the whole menu and `data-action` attributes for buttons that has the method to call: +Der er andre brugsscenarier for event delegation. + +Lad os sige, at vi vil lave et menu med knapper "Save", "Load", "Search" og så videre. Og der er et objekt med metoder `save`, `load`, `search`... Hvordan matcher vi dem? + +Den første idé kan være at tildele en separat handler til hver knap. Men der er en mere elegant løsning. Vi kan tilføje en handler for hele menuen og sætte `data-action` attributter for knapper, der har den metode, der skal kaldes: ```html - + ``` -The handler reads the attribute and executes the method. Take a look at the working example: +Handleren læser attributten og eksekverer metoden. Prøv eksemplet nedenfor: ```html autorun height=60 run untrusted