Heim > Artikel > Web-Frontend > Drei Möglichkeiten, ein Ereignis für ein Element in javascript_javascript skills anzugeben

Drei Möglichkeiten, ein Ereignis für ein Element in javascript_javascript skills anzugeben

WBOYOriginal: 2016-05-16 16:40:101108Durchsuche

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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wenn die Webseite ausgeführt wird, unterstützt das Eingabeaufforderungsobjekt weder das Attribut abigimage noch method_javascript-TippsNächster Artikel：Wenn die Webseite ausgeführt wird, unterstützt das Eingabeaufforderungsobjekt weder das Attribut abigimage noch method_javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen