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 24: Line 38:
===Auf Events reagieren===
===Auf Events reagieren===
Wenn wir in JavaScript auf ein bestimmtes Event reagieren wollen, müssen wir einen Eventhandler registrieren.
Wenn wir in JavaScript auf ein bestimmtes Event reagieren wollen, müssen wir einen Eventhandler registrieren.


====Beispiel 1 - Event Handler Attribut im HTML====
====Beispiel 1 - Event Handler Attribut im HTML====
Line 39: Line 54:


====Beispiel 2====
====Beispiel 2====
Hier wird bei '''onclick''' die Funktion "doubleNumber()" aufgerufen.
Hier wird bei '''onclick''' die Funktion "verdoppelung()" aufgerufen.
<pre>
<pre>
<html>
<html>
Line 46: Line 61:
     </head>
     </head>
     <body>
     <body>
         <input value="Hier klicken!" onclick="doubleNumber()" type="button">
         <input value="Hier klicken!" onclick="verdopplung()" type="button">
         <script>
         <script>
             function doubleNumber() {
             function verdopplung() {
                 let number = prompt("Gib eine Zahl ein:");
                 let zahl = prompt("Gib eine Zahl ein:");
                 number *= 2;
                 zahl *= 2;
                 alert("Doppelter Wert: " + number);
                 alert("Doppelter Wert: " + zahl);
             }
             }
         </script>
         </script>
Line 66: Line 81:
     <body>
     <body>
         <p> Absatz 1</p>
         <p> Absatz 1</p>
         <p id="paragraph">Absatz 2</p>
         <p id="absatz">Absatz 2</p>
         <p>Absatz 3</p>
         <p>Absatz 3</p>
         <script>
         <script>
Line 72: Line 87:
             // 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
             paragraph.onmouseover = function() {
             absatz.onmouseover = function() {
                 alert("Hier befindet sich Absatz 2..");
                 alert("Hier befindet sich Absatz 2..");
             }
             }
Line 79: Line 94:
            
            
           // Variante 2
           // Variante 2
           function message() {
           function nachricht() {
               alert("Hier befindet sich Absatz 2..");  
               alert("Hier befindet sich Absatz 2..");  
           }
           }
           paragraph.onmouseover = message;
           absatz.onmouseover = nachricht;
            
            
           // -------------------------------------
           // -------------------------------------
            
            
           // Variante 3
           // Variante 3
           function message() {
           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.
           paragraph.addEventListener("mouseover", message);
           absatz.addEventListener("mouseover", nachricht);
         </script>
         </script>
     </body>
     </body>
Line 100: Line 115:
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 '''message1()''' -> einfach '''message1''';
# 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 126:
         <button type="button" id="btn">Klick mich</button>
         <button type="button" id="btn">Klick mich</button>
         <script>
         <script>
             function message1() {
             function nachricht1() {
                 alert("Nachricht 1");
                 alert("Nachricht 1");
                 btn.addEventListener("click", message2);
                 btn.addEventListener("click", nachricht2);
                 btn.removeEventListener("click", message1);
                 btn.removeEventListener("click", nachricht1);
             }
             }
             function message2() {
             function nachricht2() {
                 alert("Nachricht 2");
                 alert("Nachricht 2");
                 btn.addEventListener("click", message1);
                 btn.addEventListener("click", nachricht1);
                 btn.removeEventListener("click", message2);
                 btn.removeEventListener("click", nachricht2);
             }
             }
             btn.addEventListener("click", message1);
             btn.addEventListener("click", nachricht1);
         </script>
         </script>
     </body>
     </body>
Line 188: Line 203:
====Event Bubbling verhindern====
====Event Bubbling verhindern====
Möchte man verhindern, dass der Eventhandler für ein verschachteltes Element aufgerufen wird, kann man die Methode '''stopPropagation()''' des Event Objektes aufrufen.
Möchte man verhindern, dass der Eventhandler für ein verschachteltes Element aufgerufen wird, kann man die Methode '''stopPropagation()''' des Event Objektes aufrufen.
Die Methode stoppt das '''Bubbling''' für ein Event zum Nächsten. Probiert das Verhalten bei unserem letzen Beispiel einfach aus.
Die Methode stoppt das '''Bubbling''' für ein Event.
Was passiert wenn wir in der '''strongTag() Funktion''' event.stopPropagation() aufrufen? Was passiert wenn wir das selbe für die pTag()-Funktion machen? usw.
 
[[File:Event-Stop.jpg|500px]]
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stop Event Bubbling</title>
</head>
<body>
    <div>
        Das ist ein div-Element
        <p>
            Hier steht ein Text, bei dem ein Teil
            <strong>Fett markiert</strong> ist.
        </p>
    </div>
 
<script>
    function bodyTag(event) {
        alert("Body-Tag");
        this.style.backgroundColor = 'green';
        event.stopPropagation();
    }
 
    function divTag(event) {
        alert("Div-Tag");
        this.style.backgroundColor = 'yellow';
        event.stopPropagation();
    }
 
    function pTag(event) {
        alert("P-Tag");
        this.style.backgroundColor = 'grey';
        event.stopPropagation();
    }
 
    function strongTag(event) {
        alert("strong-Tag");
        this.style.backgroundColor = 'lightblue';
        event.stopPropagation();
    }
 
    document.body.onclick = bodyTag;
    document.querySelector('div').onclick = divTag;
    document.querySelector('p').onclick = pTag;
    document.querySelector('strong').onclick = strongTag;
</script>
</body>
</html>
</pre>
 
====preventDefault()====
Verhindert das Standardverhalten von Elementen im Webbrowser. Typischer Einsatz für .preventDefault() sind Formulare, die vor dem Ansenden durch Javascript geprüft werden.
Wenn ein Javascript-Event an den submit-Button gebunden ist, muss das normale Verhalten des Buttons unterbunden werden, um das Weiterleiten der Daten an die Anwendung auf dem Server zu blockieren.
 
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prevent Default</title>
</head>
<body>
  <form action="" method="post">
    <label for="name">Name:</label><br>
    <input type="text" id="name"><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email"><br>
    <label for="your-message">Your Message:</label><br>
    <textarea id="your-message"></textarea><br>
    <button type="submit">Send</button>
  </form>
<script>
 
  const btn = document.querySelector('button');
  btn.addEventListener('click', evalData);
 
    function evalData(event){
        event.preventDefault();
        console.log('This prevents the auto submit event of the form');
    }
</script>
</body>
</html>
</pre>


'''weitere Infos zu .stopPropagation() & .preventDefault():''' https://www.mediaevent.de/javascript/event-handler-default-verhindern.html


====event.target Property====
Die '''event.target''' Property gibt zurück welches Element ein Event getriggered hat.
Dadurch kann man flexibel reagieren und zum Beispiel unterscheiden, welcher bestimmte Button in einer Gruppe von Buttons ein Event ausgelöst hat.
Durch event.target können wir mehr über das '''auslösende Element erfahren'''
*'''event.target.className''' => der Klassename des Elements
*'''event.target.id''' => die ID des Elements
*'''event.target.values''' => der Wert des Elements
*'''event.target.style''' => CSS Styles des Elements


'''Hilfestellung dazu:''' https://www.mediaevent.de/javascript/event-handler-default-verhindern.html
b
<pre>
<pre>
<body id="bodypoint">
<body id="bodypoint">
Line 299: Line 220:
         </div>
         </div>
         <script>
         <script>
             function background() {
             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 227:
                 p.style.backgroundColor = 'green';
                 p.style.backgroundColor = 'green';
             }
             }
             bodypoint.onclick = background;
             bodypoint.onclick = hintergrund;
         </script>
         </script>
     </body>
     </body>
Line 316: Line 237:
*'''onMouseUp''' - wenn Maustaste losgelassen wird
*'''onMouseUp''' - wenn Maustaste losgelassen wird


====Beispiel 1 - Mouse-Events====
 
====Beispiel 1====
<pre>
<pre>
<body>
<body>
Line 337: Line 259:
</pre>
</pre>


====Beispiel 2: Keyboard-Events====
====Beispiel 2====
<pre>
<pre>
<body>
<body>
     <input id="input" type="input">
     <input id="eingabe" type="input">
     <script>
     <script>
         function keyPressed(e) {
         function tastatureingabe(e) {
             alert("Key: " + e.key + "\nCode: " + e.code);
             alert("Key: " + e.key + "\nCode: " + e.code);
         }
         }
         input.onkeypress = keyPressed;
         eingabe.onkeypress = tastatureingabe;
     </script>
     </script>
</body>
</body>
</pre>
</pre>


===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 Browserfensters
**alert()- und prompt()-Befehl gehören zum window-Objekt
**'''window-Objekt''' muss nicht ausdrücklich im Programm genannt werden ('''alert()''' ist eigentlich '''window.alert()''')


===Das window-Objekt===
===Das window-Objekt===
Line 365: Line 279:


<pre>
<pre>
     let number = prompt("Gib eine Zahl ein");
     let zahl = prompt("Gib eine Zahl ein");
     alert("eingegebene Zahl: " + number);
     alert("eingegebene Zahl: " + zahl);
     let confirmation = confirm(decodeURI("Bestätige die Eingabe"));
     let bestaetigung = confirm(decodeURI("Bestätige die Eingabe"));
     if(confirmation) {
     if(bestaetigung) {
         document.write("Eingabe bestätigt");
         document.write("Eingabe bestätigt");
     } else {
     } else {
Line 374: Line 288:
     }
     }
</pre>
</pre>


====Fenster schließen und neue Fenster öffnen====
====Fenster schließen und neue Fenster öffnen====
Line 399: Line 314:
<!-- Höhe und Breite abfragen -->
<!-- Höhe und Breite abfragen -->
<script>
<script>
     let height = window.innerHeight;
     let hoehe = window.innerHeight;
     let width = window.innerWidth;
     let breite = window.innerWidth;
     document.write(height + "px Höhe<br>" + width + "px Breite");
     document.write(hoehe + "px Höhe<br>" + breite + "px Breite");
</script>
</script>
</pre>
</pre>
Line 407: Line 322:


====Den zeitlichen Ablauf steuern====
====Den zeitlichen Ablauf steuern====
*Zeitverzögerung durch '''setTimeout() & setInterval()'''
*Zeitverzögerung durch '''setTimeout()'''


====Beispiel 1 - setTimeout()====
====Beispiel 1====
<pre>
<pre>
//HMTL:
//HMTL:
Line 416: Line 331:
//JavaScript:
//JavaScript:
<script>
<script>
     function message() {
     function nachricht() {
         alert("Button vor 2 Sekunden gedrückt");
         alert("Button vor 2 Sekunden gedrückt");
     }
     }
     function start() {
     function start() {
         setTimeout(message, 2000);
         setTimeout(nachricht, 2000);
     }
     }
</script>
</script>
Line 433: Line 347:
//JavaScript
//JavaScript
<script>
<script>
     function message() {
     function nachricht() {
         alert("Button vor 2 Sekunden gedrückt");
         alert("Button vor 2 Sekunden gedrückt");
     }
     }


     function message2() {
     function nachricht2() {
         alert("Button vor 4 Sekunden gedrückt");
         alert("Button vor 4 Sekunden gedrückt");
     }
     }


     function start() {
     function start() {
         setTimeout(message, 2000);
         setTimeout(nachricht, 2000);
         setTimeout(message2, 4000);
         setTimeout(nachricht2, 4000);
     }
     }
</script>
</script>
Line 470: Line 384:
</pre>
</pre>


====Beispiel 4 - setInterval()====
====Beispiel 4====
Ruft eine Callback-Funktion im gegebenen Interval immer wieder auf
<pre>
<pre>
<script>
<script>
Line 479: Line 392:
         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>

Please note that all contributions to Coders.Bay Wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see CB Wiki:Copyrights for details). Do not submit copyrighted work without permission!

Cancel Editing help (opens in new window)
Retrieved from "http://wiki.streampy.at/index.php?title=JavaScript_1_Event_Handling"