Ereignisbehandlung in JavaScript
Dieser Artikel erklärt die Ereignisbehandlung in JavaScript.
YouTube Video
javascript-html-event.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container-flex">
105 <div class="left-column">
106 <h2>HTML Sample</h2>
107 <div id="parentDiv">
108 <button id="myButton">Click me</button>
109 </div>
110 </div>
111
112 <div class="right-column">
113 <h2>Form Sample</h2>
114 <form id="myForm">
115 <input type="text" name="username">
116 <button type="submit">Submit</button>
117 </form>
118 </div>
119 </div>
120
121 <div class="container">
122 <h1>JavaScript Console</h1>
123 <button id="executeBtn">Execute</button>
124 <div id="output"></div>
125 </div>
126
127 <script>
128 // Override console.log to display messages in the #output element
129 (function () {
130 const originalLog = console.log;
131 console.log = function (...args) {
132 originalLog.apply(console, args);
133 const output = document.getElementById('output');
134 output.textContent += args.map(String).join(' ') + '\n';
135 };
136 })();
137
138 document.getElementById('executeBtn').addEventListener('click', () => {
139 // Prevent multiple loads
140 if (document.getElementById('externalScript')) return;
141
142 const script = document.createElement('script');
143 script.src = 'javascript-html-event.js';
144 script.id = 'externalScript';
145 //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146 //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147 document.body.appendChild(script);
148 });
149 </script>
150</body>
151</html>Ereignisbehandlung in JavaScript
Die Ereignisbehandlung in JavaScript ist ein Mechanismus, um spezifische Aktionen als Reaktion auf Benutzeraktionen (wie Klicks und Tastatureingaben) oder Browseraktionen auszuführen. Durch das Einrichten von Event-Listenern können Sie dynamische und interaktive Webseiten erstellen.
Grundlagen von Ereignissen
Ereignisse treten als Reaktion auf Benutzeraktionen und Browseraktionen auf. Wenn ein Ereignis eintritt, wird der zugehörige Ereignishandler (Funktion) ausgeführt. Zum Beispiel gibt es die folgenden Ereignisse:.
- Klick (
click) - Tastatureingabe (
keydown,keyup) - Mausbewegung (
mousemove,mouseover) - Formularübermittlung (
submit) - Seitenladevorgang abgeschlossen (
DOMContentLoaded) - Scrollen (
scroll)
Hinzufügen von Event-Listenern
Event-Listener werden mit der Methode addEventListener() eingerichtet. Diese Methode ruft eine bestimmte Funktion auf, wenn das angegebene Ereignis eintritt.
Grundlegende Syntax von addEventListener()
1element.addEventListener(event, handler);elementist das HTML-Element, das das Ereignis überwacht.eventist der Ereignisname (zum Beispielclick).handlerist die Funktion, die ausgeführt wird, wenn das Ereignis eintritt.
Ereignisobjekt
Wenn ein Ereignis eintritt, übergibt JavaScript ein Ereignisobjekt, das die Details des Ereignisses enthält, an den Ereignishandler. Dieses Objekt enthält Informationen wie welches Element das Ereignis ausgelöst hat und welche Taste gedrückt wurde.
Beispiel: Verwendung des Ereignisobjekts
1<button id="myButton">Click me</button>1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4 console.log(event); // Display event details in the console
5 console.log('Clicked element:', event.target); // Display the clicked element
6});- Dieser Code verwendet das Ereignisobjekt, um beim Klicken auf den Button detaillierte Informationen und das angeklickte Element in der Konsole anzuzeigen.
Typische Ereignisse
Klick-Ereignis
Das click-Ereignis tritt auf, wenn der Benutzer auf ein Element klickt.
1element.addEventListener('click', () => {
2 console.log('Clicked');
3});- Dieser Code zeigt eine Nachricht in der Konsole an, wenn auf das Element geklickt wird.
Tastaturereignisse
Die keydown- und keyup-Ereignisse treten auf, wenn der Benutzer eine Taste drückt oder loslässt. Sie können event.key verwenden, um zu sehen, welche Taste gedrückt wurde.
1document.addEventListener('keydown', (event) => {
2 console.log(`Key pressed: ${event.key}`);
3});- Dieser Code zeigt den Namen der Taste in der Konsole an, wenn der Benutzer eine Taste drückt.
Mausereignisse
Die mousemove- und mouseover-Ereignisse treten bei Mausbewegungen und beim Überfahren eines Elements auf.
1document.addEventListener('mousemove', (event) => {
2 console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});- Dieser Code zeigt die Position (X- und Y-Koordinaten) in der Konsole an, jedes Mal wenn die Maus bewegt wird.
Formularereignisse
Zu formularbezogenen Ereignissen gehören submit und input. Das submit-Ereignis tritt auf, wenn ein Formular übermittelt wird und verursacht normalerweise ein Neuladen der Seite. event.preventDefault() wird jedoch oft verwendet, um dies zu verhindern.
Beispiel: Verhindern des Neuladens einer Seite bei Formularübermittlung
1<form id="myForm">
2 <input type="text" name="username">
3 <button type="submit">Submit</button>
4</form>1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4 event.preventDefault(); // Prevent page reload
5 console.log('Form has been submitted');
6});- Dieser Code verhindert das Neuladen der Seite beim Absenden des Formulars und zeigt stattdessen eine Nachricht in der Konsole an.
Ereignisausbreitung (Bubbling und Capturing)
Ereignisse propagieren sich in zwei Phasen: die Capturing-Phase, die von den Elternelementen zu den Kindelementen geht, und die Bubbling-Phase, die von den Kindelementen zu den Elternelementen geht.
Ereignis-Bubbling
Standardmäßig treten Ereignisse im innersten Element auf und breiten sich nach außen aus. Das wird als Bubbling bezeichnet.
Beispiel: Bubbling-Beispiel
1<div id="parentDiv">
2 <button id="myButton">Click me</button>
3</div> 1const parent = document.getElementById('parentDiv');
2const button = document.getElementById('myButton');
3
4parent.addEventListener('click', () => {
5 console.log('Parent element was clicked');
6});
7
8button.addEventListener('click', () => {
9 console.log('Button was clicked');
10});- In diesem Beispiel tritt das Ereignis des Buttons zuerst auf, gefolgt von dem Ereignis des Elternelements, wenn Sie auf den Button klicken.
Ereignis-Capturing
Indem Sie true als drittes Argument in addEventListener() angeben, können Sie Ereignisse in der Capturing-Phase behandeln.
1parent.addEventListener('click', () => {
2 console.log('Capturing: Parent element was clicked');
3}, true);- Dieser Code behandelt das Klick-Ereignis des übergeordneten Elements in der Capturing-Phase und zeigt dabei eine Nachricht in der Konsole an.
Verhindern der Ausbreitung mit stopPropagation()
Sie können Ereignisse von der Weiterleitung abhalten, indem Sie event.stopPropagation() verwenden.
1button.addEventListener('click', (event) => {
2 event.stopPropagation(); // Stop the event propagation
3 console.log('Button was clicked (no propagation)');
4});- Dieser Code verhindert die Weiterleitung des Ereignisses, wenn auf den Button geklickt wird, und zeigt eine Nachricht in der Konsole an.
Ereignisse entfernen
Sie können Ereignis-Listener mit removeEventListener() entfernen. Um einen Ereignis-Listener zu entfernen, benötigen Sie eine Referenz auf die Funktion, die in addEventListener() angegeben wurde.
1function handleClick() {
2 console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick); // Remove the event listener
- Dieser Code entfernt den Klick-Event-Listener vom Button, sodass dieser nicht mehr beim Klicken ausgelöst wird.
Benutzerdefinierte Ereignisse
In JavaScript können Sie zusätzlich zu Standardereignissen benutzerdefinierte Ereignisse erstellen und auslösen. Verwenden Sie den CustomEvent-Konstruktor.
1document.addEventListener('myCustomEvent', (event) => {
2 console.log(event.detail.message); // Displays "Hello!"
3});
4
5const event = new CustomEvent('myCustomEvent', {
6 detail: {
7 message: 'Hello!'
8 }
9});
10document.dispatchEvent(event);- Dieser Code erstellt und löst ein benutzerdefiniertes Ereignis
myCustomEventaus und zeigt dessen Details in der Konsole an.
Zusammenfassung
Die Ereignisbehandlung ist ein wesentlicher Bestandteil zur Steigerung der Interaktivität von Webanwendungen. Durch die Nutzung der Komponenten der Ereignisbehandlung kannst du eine flexiblere und anspruchsvollere Benutzererfahrung bieten.
- Event Listener: Verwenden Sie
addEventListener(), um einen Ereignis-Handler an einem Element zu setzen. - Ereignisobjekt: Wenn ein Ereignis auftritt, wird ein Ereignisobjekt übergeben, mit dem detaillierte Informationen abgerufen werden können.
- Ereignisweiterleitung: Ereignisse werden in zwei Phasen weitergeleitet: Bubbling und Capturing.
- Formularereignisse und benutzerdefinierte Ereignisse: Sie können Formularübermittlungen und Ihre eigenen benutzerdefinierten Ereignisse verarbeiten.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.