From 7ba49fc6737773227b8dbc6b042f582aa4152954 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Mon, 5 Oct 2026 13:51:50 +0200
Subject: [PATCH]

---
 .../tag21/04_event-mouse-pointer/index.html   | 136 ++++++++++++++++++
 .../tag21/05_event-keyboard/index.html        |  61 ++++++++
 2 files changed, 197 insertions(+)
 create mode 100644 03_js-dom/unterricht/tag21/04_event-mouse-pointer/index.html
 create mode 100644 03_js-dom/unterricht/tag21/05_event-keyboard/index.html

diff --git a/03_js-dom/unterricht/tag21/04_event-mouse-pointer/index.html b/03_js-dom/unterricht/tag21/04_event-mouse-pointer/index.html
new file mode 100644
index 0000000..2dd56f0
--- /dev/null
+++ b/03_js-dom/unterricht/tag21/04_event-mouse-pointer/index.html
@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Events - MouseEvent | PointerEvent</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      .box {
+        background-color: tomato;
+        padding: 2rem;
+        display: block;
+        width: 200px;
+      }
+
+      .box .inner {
+        background-color: orange;
+        color: white;
+        display: inline-block;
+        padding: 0.5rem;
+      }
+
+      .content-box {
+        cursor: none !important;
+        width: 600px;
+        height: 250px;
+        border: 5px solid #ccc;
+        margin: 2rem;
+        position: relative;
+      }
+
+      .mouse-follower {
+        width: 20px;
+        height: 20px;
+        margin: -10px 0 0 -10px;
+        border-radius: 50%;
+        background-color: tomato;
+        position: absolute;
+        top: 0;
+        left: 0;
+        user-select: none;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Events - MouseEvent | PointerEvent</h1>
+        <p><a href="https://developer.mozilla.org/de/docs/Web/API/Document_Object_Model/Events">Standard Events</a></p>
+        <p><a href="https://www.w3schools.com/jsref/dom_obj_event.asp">JS Events in W3Schools</a></p>
+        <hr />
+
+        <!-- .mb-3>img[src="https://dummyimage.com/600x300/f90/fff.jpg"].img-thumbnail -->
+        <div class="mb-3"><img src="https://dummyimage.com/600x300/f90/fff.jpg" alt="" class="img-thumbnail" /></div>
+
+        <!-- button.btn.btn-primary.button-click.mb-3>span{Klick Mich} -->
+        <button class="btn btn-primary button-click mb-3" type="button"><span>Klick Mich</span></button>
+
+        <!-- .box>span.inner{Content} -->
+        <div class="box"><span class="inner">Content</span></div>
+
+        <div class="content-box">
+          <div class="mouse-follower"></div>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // PointerEvent - click - Ereignis wird ausgelöst, wenn der Anwender auf ein Element klickt.
+      $('.button-click').addEventListener('click', (e) => {
+        console.log('PointerEvent: ', e);
+        console.log('CLICK');
+
+        console.log('e.target: ', e.target); // verschachtelte angeklickte Element
+
+        // BITTE BEI POINTER/MOUSEEVENT e.currentTarget VERWENDEN!!
+        console.log('e.currentTarget: ', e.currentTarget); // gibt das Element zurück, worauf der Ereignis-Lauscher angelegt wurde.
+      });
+
+      // PointerEvent - dblclick - Ereignis wird ausgelöst, wenn der Anwender auf ein Element doppelt klickt.
+      $('.button-click').addEventListener('dblclick', (e) => {
+        console.log('PointerEvent: ', e);
+        console.log('DOUBLE_CLICK');
+      });
+
+      // MouseEvent - mouseenter - Ereignis wird ausgelöst, wenn der Benutzer über ein Element fährt. (einmalig)
+      $('img').addEventListener('mouseenter', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE_ENTER');
+      });
+
+      // MouseEvent - mouseleave - Ereignis wird ausgelöst, wenn der Benutzer ein Element verlässt. (einmalig)
+      $('img').addEventListener('mouseenter', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE_LEAVE');
+      });
+
+      // MouseEvent - mouseover - Ereignis wird ausgelöst, wenn der Benutzer über ein Element oder ein verschachteltes Element fährt. (mehrfach)
+      $('.box').addEventListener('mouseover', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE_OVER');
+      });
+
+      // MouseEvent - mouseout - Ereignis wird ausgelöst, wenn der Benutzer ein Element oder ein verschachteltes Element verlässt. (mehrfach)
+      $('.box').addEventListener('mouseout', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE_OUT');
+      });
+
+      $('.content-box').addEventListener('mousemove', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE_MOVE');
+        console.log('screenX: ', e.screenX, 'clientX:', e.clientX, 'offsetX: ', e.offsetX);
+        console.log('screenY: ', e.screenY, 'clientY:', e.clientY, 'offsetY: ', e.offsetY);
+
+        $('.mouse-follower').style.top = `${e.offsetY}px`;
+        $('.mouse-follower').style.left = `${e.offsetX}px`;
+      });
+
+      $('.content-box').addEventListener('mousedown', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE_DOWN');
+      });
+
+      $('.content-box').addEventListener('mouseup', (e) => {
+        console.log('MouseEvent: ', e);
+        console.log('MOUSE_UP');
+      });
+    </script>
+  </body>
+</html>
diff --git a/03_js-dom/unterricht/tag21/05_event-keyboard/index.html b/03_js-dom/unterricht/tag21/05_event-keyboard/index.html
new file mode 100644
index 0000000..fd447ff
--- /dev/null
+++ b/03_js-dom/unterricht/tag21/05_event-keyboard/index.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Events - KeyboardEvent | InputEvent | FocusEvent</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Events - KeyboardEvent | InputEvent | FocusEvent</h1>
+        <p><a href="https://developer.mozilla.org/de/docs/Web/API/Document_Object_Model/Events">Standard Events</a></p>
+        <p><a href="https://www.w3schools.com/jsref/dom_obj_event.asp">JS Events in W3Schools</a></p>
+        <hr />
+        <!-- .member-search.my-3>label.form-label+input:search.form-control#input-search.input-search -->
+        <div class="member-search my-3">
+          <label for="input-search" class="form-label">Suchfeld</label>
+          <input type="search" name="" id="input-search" class="form-control input-search" />
+        </div>
+
+        <!-- .percent-scale.mb-3>label.form-label{Regler}+input:range#input-range.form-range.input-range -->
+        <div class="percent-scale mb-3">
+          <label for="input-range" class="form-label">Regler</label>
+          <input
+            type="range"
+            name="percent"
+            min="0"
+            max="100"
+            value="0"
+            id="input-range"
+            class="form-range input-range" />
+        </div>
+
+        <!-- .country-selection.mb-3>label.form-label{Select Country}+select#select-country.select-country.form-select>option*4 -->
+        <div class="country-selection mb-3">
+          <label for="select-country" class="form-label">Select Country</label>
+          <select name="country" id="select-country" class="select-country form-select">
+            <option value="de">Deutschland</option>
+            <option value="es">Spanien</option>
+            <option value="fr">Frankreich</option>
+            <option value="it">Italien</option>
+          </select>
+        </div>
+
+        <div class="checkbox mb-3">
+          <input type="checkbox" name="agb" id="cb-agb" />
+          <label for="cb-agb" class="form-check-label">AGB akzeptieren</label>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // KeyboardEvent ============================
+    </script>
+  </body>
+</html>