Editing JavaScript 1 Event Handling
Jump to navigation
Jump to search
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 1: | Line 1: | ||
==JavaScript und der Webbrowser== | ==JavaScript und der Webbrowser== | ||
*JavaScript Events bieten die Möglichkeit auf Aktionen, die User im Browser durchführen, zu reagieren | *JavaScript Events bieten die Möglichkeit auf Aktionen, die User im Browser durchführen, zu reagieren | ||
**Wenn Anwender bestimmte Aktion durchführt, löst der Browser entsprechendes Event aus. | **Wenn Anwender bestimmte Aktion durchführt, löst der Browser entsprechendes Event aus. | ||
===Browser-Object-Modell BOM=== | |||
*Dient dazu, die grundlegenden Eigenschaften des Browsers zu steuern | |||
*wird auch als Window-Objekt bezeichnet -> bezieht sich auf das Browser-Fenster | |||
*alle globalen Objekte, Funktionen und Variablen sind teil des Window-Objektes | |||
**auch das DOM (Document Object) ist eine Property des Window-Objektes | |||
**Verfügt über grundlegende Eigenschaften des Fensters | |||
***Fenstergröße festlegen (window.innerHeight, window.innerWidth) | |||
***Ein Fenster öffnen '''window.open()''' | |||
***Ein Fenster schließen '''window.close()''' | |||
***Ein Fenster verschieben '''window.moveTo()''' | |||
***Die Fenstergröße verändern '''window.resizeTo()''' | |||
**alert()- und prompt()-Befehl gehören zum window-Objekt | |||
**'''window-Objekt''' muss nicht ausdrücklich im Programm genannt werden ('''alert()''' ist eigentlich '''window.alert()''') | |||
====Liste der wichtigsten Browser-Events==== | |||
=====Liste der wichtigsten Browser-Events===== | |||
*'''click''': Klick auf ein beliebiges Element | *'''click''': Klick auf ein beliebiges Element | ||
*'''contextmenu''': Klick mit der rechten Maustaste auf ein beliebiges Element | *'''contextmenu''': Klick mit der rechten Maustaste auf ein beliebiges Element | ||
Line 39: | Line 53: | ||
====Beispiel 2==== | ====Beispiel 2==== | ||
Hier wird bei '''onclick''' die Funktion " | Hier wird bei '''onclick''' die Funktion "verdoppelung()" aufgerufen. | ||
<pre> | <pre> | ||
<html> | <html> | ||
Line 46: | Line 60: | ||
</head> | </head> | ||
<body> | <body> | ||
<input value="Hier klicken!" onclick=" | <input value="Hier klicken!" onclick="verdopplung()" type="button"> | ||
<script> | <script> | ||
function | function verdopplung() { | ||
let | let zahl = prompt("Gib eine Zahl ein:"); | ||
zahl *= 2; | |||
alert("Doppelter Wert: " + | alert("Doppelter Wert: " + zahl); | ||
} | } | ||
</script> | </script> | ||
Line 66: | Line 80: | ||
<body> | <body> | ||
<p> Absatz 1</p> | <p> Absatz 1</p> | ||
<p id=" | <p id="absatz">Absatz 2</p> | ||
<p>Absatz 3</p> | <p>Absatz 3</p> | ||
<script> | <script> | ||
Line 72: | Line 86: | ||
// nach dem Punkt folgt Art des Events mit vorangestelltem Präfix "on" | // nach dem Punkt folgt Art des Events mit vorangestelltem Präfix "on" | ||
// diesem Ausdruck dann eine Funktion zuweisen | // diesem Ausdruck dann eine Funktion zuweisen | ||
absatz.onmouseover = function() { | |||
alert("Hier befindet sich Absatz 2.."); | alert("Hier befindet sich Absatz 2.."); | ||
} | } | ||
Line 79: | Line 93: | ||
// Variante 2 | // Variante 2 | ||
function | function nachricht() { | ||
alert("Hier befindet sich Absatz 2.."); | alert("Hier befindet sich Absatz 2.."); | ||
} | } | ||
absatz.onmouseover = nachricht; | |||
// ------------------------------------- | // ------------------------------------- | ||
// Variante 3 | // Variante 3 | ||
function | function nachricht() { | ||
alert("Hier befindet sich Absatz 2.."); | alert("Hier befindet sich Absatz 2.."); | ||
} | } | ||
// Hier wird die Methode '''.addEventListener()''' verwendet. | // Hier wird die Methode '''.addEventListener()''' verwendet. | ||
absatz.addEventListener("mouseover", nachricht); | |||
</script> | </script> | ||
</body> | </body> | ||
Line 100: | Line 114: | ||
Die Methode benötigt zwei Parameter: | Die Methode benötigt zwei Parameter: | ||
# die Art des Events auf das reagiert werden soll ("click", "mouseover", ...) -> '''Achtung:''' hier müsst ihr das "on" weglassen, statt "onclick" -> einfach "click" | # die Art des Events auf das reagiert werden soll ("click", "mouseover", ...) -> '''Achtung:''' hier müsst ihr das "on" weglassen, statt "onclick" -> einfach "click" | ||
# die Callback-Funktion, die aufgerufen werden soll. -> immer ohne () -> statt ''' | # die Callback-Funktion, die aufgerufen werden soll. -> immer ohne () -> statt '''nachricht1()''' -> einfach '''nachricht1'''; | ||
* Event-Listener können mit '''.removeEventlistener()''' wieder entfernt werden | * Event-Listener können mit '''.removeEventlistener()''' wieder entfernt werden | ||
Line 111: | Line 125: | ||
<button type="button" id="btn">Klick mich</button> | <button type="button" id="btn">Klick mich</button> | ||
<script> | <script> | ||
function | function nachricht1() { | ||
alert("Nachricht 1"); | alert("Nachricht 1"); | ||
btn.addEventListener("click", | btn.addEventListener("click", nachricht2); | ||
btn.removeEventListener("click", | btn.removeEventListener("click", nachricht1); | ||
} | } | ||
function | function nachricht2() { | ||
alert("Nachricht 2"); | alert("Nachricht 2"); | ||
btn.addEventListener("click", | btn.addEventListener("click", nachricht1); | ||
btn.removeEventListener("click", | btn.removeEventListener("click", nachricht2); | ||
} | } | ||
btn.addEventListener("click", | btn.addEventListener("click", nachricht1); | ||
</script> | </script> | ||
</body> | </body> | ||
Line 191: | Line 205: | ||
Was passiert wenn wir in der '''strongTag() Funktion''' event.stopPropagation() aufrufen? Was passiert wenn wir das selbe für die pTag()-Funktion machen? usw. | Was passiert wenn wir in der '''strongTag() Funktion''' event.stopPropagation() aufrufen? Was passiert wenn wir das selbe für die pTag()-Funktion machen? usw. | ||
<pre> | <pre> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
Line 197: | Line 210: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title> | <title>Event Bubbling</title> | ||
</head> | </head> | ||
<body> | <body> | ||
Line 207: | Line 220: | ||
</p> | </p> | ||
</div> | </div> | ||
<script> | <script> | ||
function bodyTag(event) { | function bodyTag(event) { | ||
Line 242: | Line 254: | ||
</pre> | </pre> | ||
'''Hilfestellung dazu:''' https://www.mediaevent.de/javascript/event-handler-default-verhindern.html | |||
b | |||
''' | |||
<pre> | <pre> | ||
<body id="bodypoint"> | <body id="bodypoint"> | ||
Line 299: | Line 267: | ||
</div> | </div> | ||
<script> | <script> | ||
function | function hintergrund() { | ||
// target = Zielelement auf das in diesem Beispiel geklickt wird | // target = Zielelement auf das in diesem Beispiel geklickt wird | ||
// closest = gibt das Element mit der entsprechenden Bezeichnung | // closest = gibt das Element mit der entsprechenden Bezeichnung | ||
Line 306: | Line 274: | ||
p.style.backgroundColor = 'green'; | p.style.backgroundColor = 'green'; | ||
} | } | ||
bodypoint.onclick = | bodypoint.onclick = hintergrund; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 316: | Line 284: | ||
*'''onMouseUp''' - wenn Maustaste losgelassen wird | *'''onMouseUp''' - wenn Maustaste losgelassen wird | ||
====Beispiel 1 | |||
====Beispiel 1==== | |||
<pre> | <pre> | ||
<body> | <body> | ||
Line 337: | Line 306: | ||
</pre> | </pre> | ||
====Beispiel 2 | ====Beispiel 2==== | ||
<pre> | <pre> | ||
<body> | <body> | ||
<input id=" | <input id="eingabe" type="input"> | ||
<script> | <script> | ||
function | function tastatureingabe(e) { | ||
alert("Key: " + e.key + "\nCode: " + e.code); | alert("Key: " + e.key + "\nCode: " + e.code); | ||
} | } | ||
eingabe.onkeypress = tastatureingabe; | |||
</script> | </script> | ||
</body> | </body> | ||
</pre> | </pre> | ||
===Das window-Objekt=== | ===Das window-Objekt=== | ||
Line 365: | Line 326: | ||
<pre> | <pre> | ||
let | let zahl = prompt("Gib eine Zahl ein"); | ||
alert("eingegebene Zahl: " + | alert("eingegebene Zahl: " + zahl); | ||
let | let bestaetigung = confirm(decodeURI("Bestätige die Eingabe")); | ||
if( | if(bestaetigung) { | ||
document.write("Eingabe bestätigt"); | document.write("Eingabe bestätigt"); | ||
} else { | } else { | ||
Line 374: | Line 335: | ||
} | } | ||
</pre> | </pre> | ||
====Fenster schließen und neue Fenster öffnen==== | ====Fenster schließen und neue Fenster öffnen==== | ||
Line 399: | Line 361: | ||
<!-- Höhe und Breite abfragen --> | <!-- Höhe und Breite abfragen --> | ||
<script> | <script> | ||
let | let hoehe = window.innerHeight; | ||
let | let breite = window.innerWidth; | ||
document.write( | document.write(hoehe + "px Höhe<br>" + breite + "px Breite"); | ||
</script> | </script> | ||
</pre> | </pre> | ||
Line 407: | Line 369: | ||
====Den zeitlichen Ablauf steuern==== | ====Den zeitlichen Ablauf steuern==== | ||
*Zeitverzögerung durch '''setTimeout | *Zeitverzögerung durch '''setTimeout()''' | ||
====Beispiel 1 | ====Beispiel 1==== | ||
<pre> | <pre> | ||
//HMTL: | //HMTL: | ||
Line 416: | Line 378: | ||
//JavaScript: | //JavaScript: | ||
<script> | <script> | ||
function | function nachricht() { | ||
alert("Button vor 2 Sekunden gedrückt"); | alert("Button vor 2 Sekunden gedrückt"); | ||
} | } | ||
function start() { | function start() { | ||
setTimeout( | setTimeout(nachricht, 2000); | ||
} | } | ||
</script> | </script> | ||
Line 433: | Line 394: | ||
//JavaScript | //JavaScript | ||
<script> | <script> | ||
function | function nachricht() { | ||
alert("Button vor 2 Sekunden gedrückt"); | alert("Button vor 2 Sekunden gedrückt"); | ||
} | } | ||
function | function nachricht2() { | ||
alert("Button vor 4 Sekunden gedrückt"); | alert("Button vor 4 Sekunden gedrückt"); | ||
} | } | ||
function start() { | function start() { | ||
setTimeout( | setTimeout(nachricht, 2000); | ||
setTimeout( | setTimeout(nachricht2, 4000); | ||
} | } | ||
</script> | </script> | ||
Line 470: | Line 431: | ||
</pre> | </pre> | ||
====Beispiel 4 | ====Beispiel 4==== | ||
<pre> | <pre> | ||
<script> | <script> | ||
Line 479: | Line 439: | ||
i++; | i++; | ||
} | } | ||
// setInterval() ähnlich, Programm ruft | |||
// entsprechende Funktion immer wieder | |||
// aufs Neue auf | |||
setInterval(f, 1000); | setInterval(f, 1000); | ||
</script> | </script> | ||
</pre> | |||
<blockquote> | |||
Quelle: JavaScript | |||
Programmieren für Einsteiger | |||
ISBN: 978-3-96645-016-4 | |||
</pre> | </pre> |