Drei Möglichkeiten, ein Ereignis für ein Element in javascript_javascript skills anzugeben-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:40:10

Original

1143 Leute haben es durchsucht

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);

Nach dem Login kopieren

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>

Nach dem Login kopieren

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);

Nach dem Login kopieren

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>

Nach dem Login kopieren