Résumé des exemples d'utilisation de certaines fonctions d'événement courantes dans jQuery

1.$(document).ready()

$(document).ready() est la réponse dans jQuery JavaScriptUne manière typique d'utiliser l'événement onload intégré et d'effectuer des tâches. Cela a un effet similaire à onload. Mais il existe quelques différences :
Lorsqu'un document est entièrement téléchargé dans le navigateur, l'événement window.onload est déclenché. Le programme gestionnaire d'événements enregistré à l'aide de $(document).ready() pourra s'exécuter une fois le téléchargement HTML terminé et analysé dans une arborescence Dom, mais cela ne signifie pas que tous les fichiers associés ont été téléchargés. .
Il n'y a généralement qu'un seul gestionnaire d'événements onload dans une page, et il ne peut enregistrer une référence que vers une fonction à la fois tandis que $(document).ready() peut en avoir plusieurs.
De manière générale, $(document).ready() est préférable à l'utilisation du gestionnaire d'événements onload. Cependant, si le fichier associé n'a pas été chargé, il y aura des problèmes avec l'appel des attributs tels que la hauteur et la largeur de l'image, vous devez donc choisir la méthode appropriée à différents moments.

$(document).ready()有三种写法，分别是： 
> $(document).ready(function() { 
//this is the coding... 
}); 
>$().ready(function() { 
//this is the coding... 
}); 
>$(function() { 
//this is the coding... 
});

2. Capture d'événements et bouillonnement d'événements
Capture d'événements : Une stratégie qui permet à plusieurs éléments de répondre aux événements. Au cours du processus de capture d'événement, l'événement est d'abord transmis à l'élément le plus externe, puis à des éléments plus spécifiques.
Bullage d'événement : une autre stratégie opposée est appelée bouillonnement temporel. Lorsqu'un événement se produit, il sera d'abord envoyé à l'élément le plus spécifique. Une fois que cet élément aura la possibilité de répondre, l'événement sera transmis à des éléments plus généraux. Le bouillonnement d’événements peut parfois avoir des effets secondaires, conduisant à un comportement inattendu.
3. Trois façons d'empêcher la propagation d'un événement
Spécifiez l'action par défaut
En appelant la méthode .preventDefault(), l'événement peut être terminé avant que l'action par défaut ne soit initiée.
Appelez event.stopPropagation() pour arrêter la propagation des événements
jQuery fournit une méthode .stopPropagation(), qui peut empêcher complètement la propagation des événements. L'exemple de code est le suivant :
Utilisez la méthode stopPropagation() pour empêcher la propagation d'un événement

$(document).ready(function() { 
$('switcher').click(function(event){ 
if(this.id == 'switcher-narrow'){ 
$('body').addClass('narrow'); 
} 
else if(this.id == 'switcher-large'){ 
$('body').addClass('large'); 
} 
$('switcher .button').romoveClass('selected'); 
$(this).addClass('selected'); 
event.stopPropagation(); 
};) 
});

Utilisez l'attribut event.tatget pour clarifier l'événement Object
Traitement des événements La variable event dans le programme stocke l'objet événement. L'attribut event.tatget stocke l'élément cible où l'événement s'est produit. Cet attribut est spécifié dans l'API DOM, mais n'est pas implémenté par tous les navigateurs. jQuery apporte les extensions nécessaires à cet objet événement afin que cette propriété puisse être utilisée dans n'importe quel navigateur. Grâce à .target, vous pouvez déterminer l'élément du DOM qui a reçu l'événement en premier. De plus, nous savons que cela fait référence à l'élément DOM qui gère l'événement.
Utilisez l'attribut event.tatget pour clarifier l'objet événement et empêcher l'événement de bouillonner. Le code est le suivant :

$(document).ready(function() { 
$('switcher').click(function(event){ 
if(event.target == this) 
{ 
$('switcher .button').toggleClass('hidden'); 
} 
};) 
});

Liaisons d'événements couramment utilisées <🎜. >jQuery utilise la méthode .bind() pour lier des événements aux éléments et dissocier les éléments à l'aide de la méthode .unbind(). De plus, la méthode .bind() peut effectuer plusieurs liaisons. S'il n'y a pas de liaison, elle est sûre lors de la dissociation.
Souvent, un événement ne doit être déclenché qu'une seule fois, puis il doit être dissocié immédiatement. Selon l'approche traditionnelle, nous pouvons d'abord lier l'événement, puis le dissocier une fois l'événement exécuté. jQuery nous fournit une méthode abrégée pour résoudre spécifiquement l'écriture fastidieuse de code dans le scénario ci-dessus. L'exemple est le suivant :

$(document).ready(function(){ 
$('#swotcjer').one('click',toggleStyleSwitcher); 
});

5. Lors de la capture d'événements, il est souvent nécessaire de capturer les opérations utilisateur combinées et de répondre avec plusieurs fonctions. Ces événements sont appelés événements composites. La méthode .read() fournie par jQuery est l'une des méthodes événementielles les plus couramment utilisées. De plus, deux fonctions sont utilisées pour le traitement interactif :
.hover(over,out) Une méthode qui simule les événements de survol. (la souris se déplace sur et hors d'un objet). Il s'agit d'une méthode personnalisée qui fournit un état « conserver » pour les tâches fréquemment utilisées. .toggle(fn,fn) Bascule la fonction à appeler à chaque fois que vous cliquez dessus.

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!