add dom events

Sascha Schulz

2023-07-04 806078cabd7275994dbc4e8eb772ed4663159eb6

 index.html

@@ -2386,6 +2386,224 @@
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Map</h3>
                  <ul>
                     <li>auch als "assoziatives Array" bezeichnet</li>
                     <li>iterierbare Liste</li>
                     <li>ideal zur Assoziation von z.B. Hashes zu Objekt-Instanzen o.ä.</li>
                     <li>nutzbar ab es6 / es2015</li>
                     <li>löst herkömmliche Objekte als Hash-Map ab</li>
                  </ul>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        const m = new Map();
								
                        m.set("a", 0);
                        m.set("a", 1);
                        m.set("b", 2);
								
                        m.has("c"); // => false
								
                        m.delete("b");
								
                        console.log(m.get("a")); // => 1
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        m.forEach((k, v) => console.log(k, v)) // => "a" 1 ...
								
                        for (const entry of m.entries()) {
                           console.log(entry); // => ["a", 1] ...
                        }
								
                        for (const key of m.keys()) {
                           console.log(key); // => "a" ...
                        }
								
                        for (const value of m.values()) {
                           console.log(value); // => "1" ...
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Set</h3>
                  <ul>
                     <li>enthält nur einzigartige Werte</li>
                     <li>iterierbare Liste</li>
                     <li>ideale Struktur, wenn einzelne Werte einzigartig sein sollen</li>
                     <li>nutzbar ab es6 / es2015</li>
                     <li>löst individuelle Lösungen mittels Arrays und Array.prototype.indexOf o.ä. ab</li>
                  </ul>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        const s = new Set();
								
                        s.add("a");
                        s.add("a");
								
                        s.has("c"); // => false
								
                        s.delete("a");
								
                        console.log(s.size); // => 0
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        s.forEach((k, v) => console.log(k, v)) // => "a" "a" ...
								
                        for (const entry of m.entries()) {
                           console.log(entry); // => ["a", "a"] ...
                        }
								
                        for (const key of m.keys()) {
                           console.log(key); // => "a"...
                        }
								
                        for (const value of s.values()) {
                           console.log(value); // => "a" ...
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>DOM-Events</h3>
                  <ul>
                     <li>funktionale Ausführung von Code</li>
                     <li>Trigger können Klicks, Scrollen, Tastendrücke, Änderungen der Fenstergröße usw. sein</li>
                  </ul>
               </section>
               <section>
                  <img data-src="/assets/images/dom-events.svg">
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        function doSomething(e) {
                           console.log("capture");
                        }
								
                        function click(e) {
                           console.log("bubble");
                        }
								
                        div.addEventListener("click", doSomething, true);
								
                        button.addEventListener("click", click, false /* default */);
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        capturing
                        bubble
                     </code>
                  </pre>
               </section>
               <section>
                  <p>Aufgabe: Erweitere das vorherige Beispiel so, dass das div-Element einen weiteren Click-Handler bekommt,
                  der den Text "bubble2" anzeigt, nachdem "bubble" in der Konsole geloggt wurde.</p>
						
                  <p>Erwartete Ausgabe:</p>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        capturing
                        bubble
                        bubble2
                     </code>
                  </pre>
               </section>
               <section>
                  <p>Lösung:</p>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        function doSomething(e) {
                           console.log("capture");
                        }
								
                        // neu
                        function doSomething2(e) {
                           console.log("bubble2");
                        }
								
                        function click(e) {
                           console.log("bubble");
                        }
								
                        div.addEventListener("click", doSomething, true);
                        div.addEventListener("click", doSomething2, false); // neu
								
                        button.addEventListener("click", click, false /* default */);
                     </code>
                  </pre>
               </section>
               <section>
                  Die Bubble-Phase stoppen
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        function click(e) {
                           e.stopPropagation()
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <p>Aufgabe: Ändere das Ergebnis des vorherigen Beispiels, sodass die Bubble-Phase auf Ebene des button-Elements gestoppt wird. Was ändert sich in der Ausgabe?</p>
               </section>
               <section>
                  <p>Lösung:</p>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        function doSomething(e) {
                           console.log("capture");
                        }
								
                        function doSomething2(e) {
                           console.log("bubble2");
                        }
								
                        function click(e) {
                           e.stopPropagation();
                           console.log("bubble");
                        }
								
                        div.addEventListener("click", doSomething, true);
                        div.addEventListener("click", doSomething2, false);
								
                        button.addEventListener("click", click, false /* default */);
                     </code>
                  </pre>
               </section>
               <section>
                  Events programatisch triggern:
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        button.dispatchEvent(new Event("click"));
                     </code>
                  </pre>
               </section>
               <section>
                  Events sind synchron:
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        doSomethingElse();
								
                        button.dispatchEvent(new Event("click"));
								
                        doAnotherThing(); // wird erst ausgeführt, wenn zuvor alle Event-Handler fertig sind
                     </code>
                  </pre>
               </section>
            </section>
         </div>
      </div>