Maison >interface Web >js tutoriel >Explication détaillée de la différence entre click et onclick

Explication détaillée de la différence entre click et onclick

php中世界最好的语言original: 2018-06-09 11:55:443398parcourir

Cette fois, je vais vous donner une explication détaillée de la différence entre click et onclick, et quelles sont les précautions d'utilisation de click et onclick. Ce qui suit est un cas pratique, jetons un coup d'œil.

Le click de JavaScript natif est décrit dans le w3c comme l'objet bouton DOM, qui est également la méthode html DOM click(), qui peut simuler un clic de souris sur le bouton.

objet bouton représente un bouton dans un document HTML. L'élément bouton n'a pas de comportement par défaut, mais doit avoir un gestionnaire d'événements onclick pour pouvoir l'utiliser.

Syntaxe : buttonObject.click()

<html>
<head>
<script type="text/javascript">
function clickButton()
 {
 document.getElementById('button1').click()
 }
function alertMsg()
 {
 alert("Button 1 was clicked!")
 }
</script>
</head>
<body onload="clickButton()">
<form>
<input type="button" id="button1" onclick="alertMsg()" value="Button 1" />
</form>
</body>
</html>

onclick est un événement, objet Événement . Objets JavaScript prenant en charge cet événement : bouton, document, case à cocher, lien, radio, réinitialiser, soumettre

Objet événement HTML DOM, représentant le statut de l'événement, tel que l'élément dans lequel l'événement s'est produit, le statut des touches du clavier, ainsi que la position de la souris et l'état du bouton de la souris. Les événements sont souvent utilisés conjointement avec des fonctions, qui ne sont exécutées que lorsque l'événement se produit !

<html>
<body>
  Field1: <input type="text" id="field1" value="Hello World!"><br />
  Field2: <input type="text" id="field2"> <br />
  点击下面的按钮，把 Field1 的内容拷贝到 Field2 中： <br />
  <button onclick="document.getElementById(&#39;field2&#39;).value=document.getElementById(&#39;field1&#39;).value">Copy Text</button>
</body>
</html>

Différence

Comme mentionné précédemment, click est une méthode et onclick est un événement.

La question la plus fondamentale est la suivante : quelle est la différence entre les méthodes et les événements ?

La différence est :

1. Le nom de l'événement commence généralement par on

2. instruction, c'est-à-dire Display call; [peut déclencher l'événement onclick]

3. L'événement n'a pas besoin d'être appelé par le programmeur. Cependant, le programmeur doit écrire une fonction et attribuer la fonction à l'événement correspondant. L'appel est dans l'événement correspondant lorsqu'il est déclenché. [Dites au navigateur quoi faire lorsque la souris clique] L'ordre d'appel est donc le suivant : d'abord la méthode, puis l'événement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez JS pour manipuler des images, en ne laissant que le noir et blanc

Utilisez React, Redux, React -redux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Comment utiliser la délégation d'événements JS dans votre projetArticle suivant：Comment utiliser la délégation d'événements JS dans votre projet

Articles Liés

Voir plus