Event Handler

Javascript Event Handler sind Anweisungen oder Funktionen, die beim Eintreten eines Events wie click, touch oder beim submit eines Formulars Aktionen als Antwort auf das Ereignis durchführen.

Damit eine einfache Anweisung oder eine Funktionen bei einem Ereignis – z.B. beim Absenden eines Formulars – aufgerufen wird, muss das Script ein Element (z.B. das submit-Element des Formulars) für das Ereignis (onsubmit) anmelden.

Ein Event kann wie folgt eingebunden werden:

Durch ein reguläres HTML-Attribut

<!DOCTYPE html><head><meta charset=“utf-8″/> 
</head>
<body>
Ein einfacher href Link mit einem Verweis auf ein 
<a href="" onclick="hello();"></a>
</body>
</html>

Oder implizit im Skript (Event Handlers als Eigenschaft des Objekts)

<script>
    element.oncklick=tuwas();
</script>    

Implizit im Skript mit element.addEventListener()

Eine weitere Möglichkeit ist den Elementen im HTML – Code eine id zuzuweisen. So gibt es zum Beispiel einen Text mit 3 Absätzen. Es soll nur auf einen Absatz reagiert werden.

Um einen Event Handler festzulegen wird die id gefolgt von einem Punkt und dem onaction Attribut festgelegt. So kann zum Beispiel ein Button erstellt werden und onclick heisst das die Funktion bei dem Klick ausgeführt wird.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Einem HTML Objekt eine ID geben</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
   </head>
<body>
   <p><button id=btn value="Hier klicken" onclick="nachricht()" ></button>
</body>
<script>function nachricht()
{
    alert("ok der Button wurde geklickt");
    
    }</script>
</html>

Ansicht im Browser:

Es muss nicht immer die Maus sein die Events auslöst. Ebenso ist dies über die Tasttaur möglich.

Es kann bei einem Event auch die Javasript-Datei verlinkt werden. JS extern zu speichern ist bei großen Projekten sehr empfehlenswert.

  <button type="button" value="Submit" onClick="Call the external js file" >