Trois façons de spécifier un événement pour un élément dans les compétences javascript

Trois façons de spécifier un événement pour un élément dans les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 16:40:10

original

1137 Les gens l'ont consulté

En JavaScript, vous pouvez spécifier un événement pour un élément. Il existe trois façons de le spécifier :
1. En HTML, utilisez l'attribut onclick
2. En javascript, utilisez l'attribut onclick
3. En javascipt, utilisez la méthode addEvenListener()

Comparaison de trois méthodes
(1) Dans les deuxième et troisième méthodes, vous pouvez transmettre un objet événement à la fonction et lire ses attributs correspondants, mais la méthode ne le peut pas.
(2) Les deuxième et troisième options sont préférées. La première ne permet pas de séparer le contenu de l'événement et le contenu associé de l'objet événement ne peut pas être utilisé.

Quelques détails de syntaxe
(1) Dans la première méthode, onclick est indépendant de la casse, mais dans la seconde méthode, les minuscules doivent être utilisées. Parce que HMTL n'est pas sensible à la casse, alors que JS est sensible à la casse.
(2) Dans les deuxième et troisième méthodes, il n'y a pas de guillemets doubles lors de la spécification du nom de la fonction, tandis que la première méthode, en tant qu'attribut HTML, nécessite des guillemets doubles.
(3) La première méthode nécessite des parenthèses, mais pas les deuxième et troisième méthodes.

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

Copier après la connexion

Le code complet est le suivant :

<!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>

Copier après la connexion

En JavaScript, vous pouvez spécifier un événement pour un élément. Il existe trois façons de le spécifier :
1. En HTML, utilisez l'attribut onclick

2. En javascript, utilisez l'attribut onclick
(1) Notez qu'il n'y a pas de guillemets doubles dans le nom de la fonction.

3. En javascipt, utilisez la méthode addEvenListener()

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

Copier après la connexion

Le code complet est le suivant :

<!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>

Copier après la connexion