Maison > Article > interface Web > Trois façons de spécifier un événement pour un élément dans les compétences javascript_javascript

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

WBOYoriginal: 2016-05-16 16:40:101108parcourir

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

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>

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

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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Lorsque la page Web est en cours d'exécution, l'objet d'invite ne prend pas en charge l'attribut abigimage ou les astuces method_javascriptArticle suivant：Lorsque la page Web est en cours d'exécution, l'objet d'invite ne prend pas en charge l'attribut abigimage ou les astuces method_javascript

Articles Liés

Voir plus