Une brève analyse du mécanisme d'événement dans les connaissances JavaScript

Une brève analyse du mécanisme d'événement dans les connaissances JavaScript_Basic

WBOY

Libérer： 2016-05-16 15:56:44

original

1418 Les gens l'ont consulté

Quel est l'événement ?

JavaScript interagit avec HTML via des événements qui se produisent sur la page lorsque l'utilisateur ou le navigateur la manipule.

Lorsque la page se charge, c'est un événement. Lorsque l'utilisateur clique sur un bouton, il s'agit d'un événement. Un autre exemple d'événements est comme appuyer sur n'importe quelle touche, fermer une fenêtre, redimensionner une fenêtre, etc.

Les développeurs peuvent utiliser ces événements pour exécuter des réponses codées en JavaScript, ce qui entraîne la fermeture de la fenêtre par des boutons, l'affichage de messages à l'utilisateur, la validation de données et pratiquement tout autre type de réponse pouvant survenir.

Les événements sont le niveau 3 du modèle objet de document (DOM). Chaque élément HTML possède un ensemble d'événements qui peuvent déclencher du code JavaScript.

Exemple :

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

Copier après la connexion

Cela produira le résultat suivant, lorsque vous cliquez sur le bouton "Bonjour", alors l'événement onclick déclenchera la fonction sayHello().

type d'événement onsubmit :

Un autre type d'événement le plus important est onsubmit. Cet événement est déclenché lorsqu'une tentative est effectuée pour soumettre le formulaire. Par conséquent, vous pouvez cibler la validation du formulaire sur ce type d’événement.

Ce qui suit est un exemple simple pour illustrer son utilisation. Ici, nous appelons une fonction validate() avant de soumettre les données du formulaire au serveur Web. La fonction validate() renvoie true si le formulaire sera soumis, sinon les données ne seront pas soumises.
Exemple :

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
  all validation goes here
  .........
  return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

Copier après la connexion

onmouseover et onmouseout :

Ces deux types d'événements aideront à créer de jolis effets avec des images ou même du texte. Lorsque la souris est placée sur un élément, l'événement onmouseout se produit lorsque la souris est déplacée hors de l'élément, et l'événement onmouseover se produit lorsque la souris se déplace sur l'élément.
Exemple :

L'exemple suivant montre que la réponse du groupe est la suivante :

<html>
<head>
<script type="text/javascript">
<!--
function over() {
  alert("Mouse Over");
}
function out() {
  alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

Copier après la connexion

Vous pouvez utiliser ces deux types d'événements pour modifier différentes images et également créer des utilisateurs pour vous aider.
Événements standards HTML 4

Les événements HTML4 standard sont répertoriés ici pour votre référence. Le script ci-dessous affiche une fonction Javascript à exécuter sur cet événement.

201564104949263.jpg (616×728)