Comment écrire des événements dans jquery

jQuery est une bibliothèque JavaScript populaire qui joue un rôle important dans notre développement Web. Parmi eux, les événements sont des éléments interactifs importants sur la page et peuvent être la clé pour obtenir divers effets interactifs. Ainsi, dans cet article, nous verrons en profondeur comment écrire des événements dans jQuery.

1. Liaison d'événements

Dans jQuery, vous pouvez utiliser la méthode .on() pour lier des événements. Cette méthode nécessite au moins deux paramètres. Le premier paramètre est le type d'événement, tel que clic, survol de la souris, appui sur la touche, etc. Le deuxième paramètre est la fonction à exécuter, c'est-à-dire le code à exécuter lorsque l'événement est déclenché.

Par exemple, le code suivant liera les événements de clic à tous les éléments avec la classe "bouton" :

$(".button").on('click', function(){
    //执行点击事件时要执行的代码
})

2. Lier plusieurs événements

Si vous devez lier plusieurs événements à un élément, vous pouvez utiliser des espaces pour le type d'événement séparé. Par exemple, le code suivant déclenchera des événements lors d'un clic et d'un double-clic en même temps :

$("#btn").on('click dblclick', function(){
    //执行事件时要执行的代码
});

3. Plusieurs éléments sont liés au même événement

Lorsque plusieurs éléments doivent être liés au même événement, vous pouvez sélectionner ces éléments via le sélecteur. Ensuite, liez-les au même événement. Par exemple, le code suivant lie tous les éléments avec la classe « bouton » au même événement de clic :

$(".button").on('click', function(){
    //执行点击事件时要执行的代码
});

4. Événements de liaison d'éléments dynamiques

Si vous devez ajouter dynamiquement des éléments à la page et que vous devez lier ces éléments Pour événements, vous pouvez utiliser le délégué d'événement de jQuery. La délégation d'événements fait référence à la liaison d'événements aux éléments parents plutôt que directement aux éléments enfants. Lorsqu'un élément enfant déclenche un événement, l'événement est transmis à l'élément parent. Par exemple, le code suivant lie les événements de clic aux balises p sur tous les éléments .content existants ou futurs :

$(".content").on('click', 'p', function(){
    //执行点击事件时要执行的代码
});

5. Dissociation des événements

Vous pouvez utiliser la méthode off() pour dissocier les événements. Par exemple, le code suivant dissociera l'événement click de tous les éléments :

$("*").off('click');

6. Empêcher les événements de bouillonner

Lorsqu'un événement est déclenché sur un élément, l'événement sera transmis à l'élément parent de l'élément. appelé événement bouillonnant. Si vous devez empêcher l'événement de se propager, vous pouvez utiliser la méthode stopPropagation() dans le gestionnaire d'événements. Par exemple, le code suivant annulera le bouillonnement :

$(".button").on('click', function(e){
    e.stopPropagation();
});

7. Empêcher le comportement par défaut de l'événement

Le comportement par défaut de certains éléments peut interférer avec d'autres effets interactifs sur la page Web. Si vous devez annuler le comportement par défaut d'un événement, vous pouvez utiliser la méthode PreventDefault() dans le gestionnaire d'événements. Par exemple, le code suivant annulera le comportement de saut par défaut du lien :

$("a").on('click', function(e){
    e.preventDefault();
});

Résumé :

Ce qui précède est la discussion des événements dans jQuery dans cet article. Grâce à l'apprentissage, nous pouvons clairement comprendre comment lier des événements, lier plusieurs événements, lier plusieurs éléments au même événement, etc. Dans le même temps, nous avons également appris des techniques telles que la liaison d'événements d'éléments dynamiques, la dissociation d'événements, la prévention du bouillonnement d'événements et la prévention des comportements par défaut des événements. En maîtrisant ces technologies, nous pouvons plus facilement obtenir divers effets interactifs sur la page et rendre la page Web plus vivante.

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!