In JavaScript können Sie ein Ereignis für ein Element angeben. Es gibt drei Möglichkeiten, es anzugeben:
1. Verwenden Sie in HTML das Onclick-Attribut
2. Verwenden Sie in Javascript das onclick-Attribut
3. Verwenden Sie in Javascipt die addEvenListener()-Methode
Vergleich von drei Methoden
(1) Bei der zweiten und dritten Methode können Sie ein Ereignisobjekt an die Funktion übergeben und die entsprechenden Attribute lesen, bei Methode eins jedoch nicht.
(2) Die zweite und dritte Option werden bevorzugt. Die erste Option ist nicht dazu geeignet, den Inhalt vom Ereignis zu trennen, und der zugehörige Inhalt des Ereignisobjekts kann nicht verwendet werden.
Einige Syntaxdetails
(1) Bei der ersten Methode ist onclick unabhängig von der Groß- und Kleinschreibung, bei der zweiten Methode muss jedoch Kleinschreibung verwendet werden. Weil bei HMTL die Groß-/Kleinschreibung nicht beachtet wird, während bei JS die Groß-/Kleinschreibung beachtet wird.
(2) Bei der zweiten und dritten Methode gibt es bei der Angabe des Funktionsnamens keine doppelten Anführungszeichen, während die erste Methode als HTML-Attribut doppelte Anführungszeichen erfordert.
(3) Die erste Methode erfordert Klammern, die zweite und dritte Methode jedoch nicht.
onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click", clickHandler2);Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>
</head>
<body>
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
<button id="jsOnClick">jsOnClick</button>
<button id="addEventListener">addEventListener</button>
<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert(e.target.innerHTML);
}
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>In JavaScript können Sie ein Ereignis für ein Element angeben. Es gibt drei Möglichkeiten, es anzugeben:
1. Verwenden Sie in HTML das Onclick-Attribut
2. Verwenden Sie in Javascript das onclick-Attribut
(1) Beachten Sie, dass der Funktionsname keine doppelten Anführungszeichen enthält.
3. Verwenden Sie in Javascript die Methode addEvenListener()
Vergleich von drei Methoden
(1) Bei der zweiten und dritten Methode können Sie ein Ereignisobjekt an die Funktion übergeben und die entsprechenden Attribute lesen, bei Methode eins jedoch nicht.
Einige Syntaxdetails
(1) Bei der ersten Methode ist onclick von der Groß- und Kleinschreibung unabhängig, bei der zweiten Methode muss jedoch Kleinschreibung verwendet werden. Weil bei HMTL die Groß-/Kleinschreibung nicht beachtet wird, während bei JS die Groß-/Kleinschreibung beachtet wird.
(2) Bei der zweiten und dritten Methode gibt es bei der Angabe des Funktionsnamens keine doppelten Anführungszeichen, während die erste Methode als HTML-Attribut doppelte Anführungszeichen erfordert.
(3) Die erste Methode erfordert Klammern, die zweite und dritte Methode jedoch nicht.
onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click", clickHandler2);Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>
</head>
<body>
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
<button id="jsOnClick">jsOnClick</button>
<button id="addEventListener">addEventListener</button>
<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert(e.target.innerHTML);
}
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>
