Cet article décrit l'utilisation de la délégation des événements JavaScript. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
1. Cliquez sur n'importe quelle partie de la page pour déclencher l'événement
Créez un fichier script1.js.
Copiez le code comme suit: (fonction () {
eventUtility.Addevent (document, "cliquez", fonction (EVT) {
alert ('bonjour');
});
} ());
Section de page.
Copiez le code comme suit: <adaft>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> </Title>
</ head>
<body>
<script src = "eventUtility.js"> </ script>
<script src = "script1.js"> </ script>
</docy>
</html>
Résultat de sortie: cliquer sur n'importe quelle page apparaîtra.
Cependant, nous voulons parfois cliquer sur un élément du document pour déclencher un événement.
2. Utilisez le délégué pour déclencher des événements
Ajoutez une balise à la page.
Copiez le code comme suit: <adaft>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> </Title>
</ head>
<body>
<div>
<p> <a href = "#"> Cliquez sur moi </a> </p>
</div>
<script src = "eventUtility.js"> </ script>
<script src = "script1.js"> </ script>
</docy>
Modifier le script1.js à:
Copiez le code comme suit: (fonction () {
eventUtility.Addevent (document, "cliquez", fonction (EVT) {
// Obtenez l'objet click
var cible = eventUtility.getTarget (evt);
// Obtenez le nom de la balise de l'objet click
var tagname = cible.tagname;
// Si la balise est un
if (tagname === "a") {
alert ("cliquez sur moi");
// bloque le comportement par défaut des liens
EventUtility.PreventDefault (EVT);
}
});
} ());
Résultat de sortie: la boîte apparaîtra uniquement si vous cliquez sur une balise de la page.
Les avantages ci-dessus sont les suivants: Peu importe le nombre d'éléments de balise ajoutés au document, tous les balises ont la possibilité d'être déclenchée. Ceci est la mise en service de l'événement. Nous voulons enregistrer des événements pour les éléments enfants, mais nous enregistrons d'abord des événements avec l'élément parent de l'élément enfant. De cette façon, tout élément qui est ajouté dynamiquement et du même type que l'élément enfant sera enregistré dans l'élément parent.
Si nous enregistrons des événements aux éléments enfants et ajoutons dynamiquement des éléments du même type que les éléments enfants du document, nous devons enregistrer des événements pour ces éléments enfants qui viennent d'être ajoutés dynamiquement.
De plus, la délégation d'événements fait bon usage des "bulles d'événements". En cliquant sur un élément enfant, selon "Bubble d'événement", l'élément parent de l'élément enfant capture l'événement de clic et déclenche sa propre méthode.
J'espère que cet article sera utile à la programmation JavaScript de tous.