[JavaScript] Eventhandling

  • sich überlagernde Events werden vom innersten zum äußersten Element verarbeitet

Variante 1 (Funktionszuweisung im HTML)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button onclick="btnClick();">Klick</button>
</body>
</html>

// Funktionsdefinition
function btnClick(){
  alert("Test");
}

Variante 2 (Registrierung des Listeners im JS)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button id="btn1">Klick</button>
</body>
</html>

// Button mit ID="btn1" holen
let b = document.getElementById("btn1");

// Funktionsdefinition
let btnClick = function(){
  alert("Test");
}

// Funktionszuweisung
b.onClick = btnClick;
// Listener hinzufügen
b.addEventListener("click", btnClick);
// Listener wieder entfernen
b.removeEventListener("click", btnClick);