Introduction aux événements courants bind, hover, toggle et autres exemples dans jquery_jquery

1.$(document).ready()

$(document).ready() est un moyen typique dans jQuery de répondre à l'événement onload intégré de JavaScript et d'effectuer des tâches. Cela a un effet similaire à onload. Mais il y a quelques différences :

Lorsqu'un document est complètement téléchargé dans le navigateur, l'événement window.onload est déclenché. Le gestionnaire d'événements enregistré à l'aide de $(document).ready() exécutera le code une fois le code HTML téléchargé 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 qu'une référence à 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é, des problèmes surviendront lors de l'appel d'attributs tels que la hauteur et la largeur de l'image. Vous devrez donc choisir la méthode appropriée à différents moments.

$(document).ready() a trois façons d'écrire, à savoir :

$(document).ready(function(){ 

//thisis the coding... 

});


$().ready(function(){ 

//thisis the coding... 

});


$(function(){ 

//thisis the coding... 

});

2. Liaison d'événement

Grammaire

$(sélecteur).bind(événement, données, fonction)

Paramètres et description :

événement : obligatoire. Spécifie un ou plusieurs événements à ajouter à l'élément. Plusieurs événements séparés par des espaces. Doit être un événement valide.

données facultatives. Spécifie des données supplémentaires à transmettre à la fonction.

fonction requise. Spécifie une fonction à exécuter lorsqu'un événement se produit.

Celui correspondant est unbind() : supprimer l'événement

Par exemple : $('#idchoose').unbind("click",Function_Name)

Événement de liaison d'abréviation : préférez généralement l'abréviation

$("#dividelement").bind("click",function(){//do something})改写为：

$("#dividelement").click(function(){//do something }

jQuery lie les événements aux éléments à l'aide de la méthode .bind() et dissocie 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);

});

À propos, l'avantage d'utiliser bind pour lier des événements est que vous pouvez définir des événements personnalisés et lier plusieurs événements à la fois.

3. Événements synthétiques

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 .ready() 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(enter,leave) Une méthode qui simule des é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.

$(function(){

$("#panelh5.head").hover(function(){

$(this).next().show();

},function(){

$(this).next().hide(); 

})

})

.toggle(fn1,fn2,..fnN) Bascule la fonction à appeler à chaque fois que vous cliquez dessus. Utilisé pour simuler des événements de clic de souris continus. Exemple :

$(function(){

$("#panelh5.head").toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

4. Objets événementiels et bouillonnement événementiel

Objet événement : L'utilisation d'objets événement dans les programmes est très simple. Il vous suffit d'ajouter un paramètre à la fonction, par exemple :

.

$(“element”).click(function(event){

//event:事件对象

})

Lorsque l'on clique sur l'élément "element", l'objet événement est créé. Cet objet n'est accessible qu'aux gestionnaires d'événements. Lorsque la fonction de gestion des événements termine son exécution, l'objet événement est détruit.

Event Capture : 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. (corps->div->span)

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. La diffusion d’événements peut parfois avoir des effets secondaires, conduisant à un comportement inattendu. (span->div->corps)

Trois façons d'empêcher les événements de bouillonner

Les événements peuvent être terminés avant que l'action par défaut ne soit initiée en appelant la méthode .preventDefault().

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 d'événements.

5. Utilisez l'attribut event.tatget pour clarifier l'objet événement

L'événement dans le gestionnaire d'événements enregistre 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 DOMAPI, 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 effacer 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'); 

}

};)

});

Pour les autres attributs d'objet événementiel, veuillez vous référer à l'introduction sur w3c.