Un regard complet sur les événements de jQuery

Cet article a été examiné par Wern Ancheta et Camilo Reyes. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

jQuery est capable de capturer presque tous les comportements d'interaction des utilisateurs dans une page Web et de le définir comme des événements. L'importance des événements est qu'ils vous permettent de répondre en conséquence en fonction des actions de l'utilisateur. Par exemple, vous pouvez écrire du code pour modifier la couleur d'arrière-plan d'une page Web en fonction des clics du bouton ou des événements de défilement.

jQuery a de nombreuses méthodes rapides, telles que contextmenu(), hover() et keyup(), pour gérer différents événements. En plus des méthodes dédiées, jQuery fournit également une méthode courante on qui vous permet de joindre des gestionnaires à tout événement: on('eventName', handler). N'oubliez pas que ces méthodes ne sont que des emballages pour les événements DOM standard auxquels vous pouvez ajouter des gestionnaires en pur javascript.

Ce tutoriel examinera rapidement toutes ces méthodes d'événements (divisées en cinq grandes catégories) et discutera des meilleures pratiques lors de leur utilisation.

points clés

• Les événements jQuery capturent les interactions utilisateur, permettant des applications Web réactives et interactives. Utilisez des méthodes comme .on() pour attacher des gestionnaires d'événements.
• Les événements de navigateur dans jQuery incluent la gestion des erreurs, le redimensionnement des fenêtres et le défilement, où certaines méthodes spécifiques dans les versions plus récentes sont obsolètes, mettant l'accent sur l'utilisation de .on('eventName', handler)'.
• L'événement de chargement de document garantit que le script ne s'exécute qu'après que le DOM est entièrement prêt, évitant les erreurs liées aux éléments non initialisés.
• Les événements de clavier et de souris en jQuery gèrent une variété d'interactions, des pressions de clés au mouvement de la souris, y compris keydown(), keyup(), click() et mousemove().
• Les événements de formulaire gèrent l'entrée et les interactions de l'utilisateur dans un formulaire, JQuery fournit des événements dédiés pour gérer efficacement la concentration, les changements et les soumissions.

Événements de navigateur

Cette catégorie contient trois événements: error, resize et scroll. L'événement error est déclenché lorsque des éléments tels que les images sont incorrectement chargés. Sa méthode de raccourci a été obsolète depuis JQuery version 1.8, vous devez donc utiliser on('error', handler) à la place.

resize événement

Cet événement est déclenché chaque fois que la taille de la fenêtre du navigateur change. Différents navigateurs peuvent appeler le gestionnaire resize de différentes manières en fonction de la méthode d'implémentation. Internet Explorer et les navigateurs basés sur WebKit appellent les gestionnaires en continu, tandis que les navigateurs comme l'opéra ne l'appellent que lorsque l'événement resize se termine.

Le code de code suivant échange des images basées sur la largeur de la fenêtre src.

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Cette démonstration de codepen montre l'effet réel de l'événement:

Afficher la démo de codepen

scroll événement

L'élément

peut déclencher cet événement lorsque l'utilisateur défile vers différentes positions dans un élément spécifique. À l'exception de l'objet window, tout élément avec une barre de défilement peut déclencher cet événement. Par exemple, tout élément qui définit l'attribut overflow à scroll ou tout iframe de défilement peut déclencher cet événement.

N'oubliez pas que le gestionnaire est appelé chaque fois que la position de défilement change. La cause du parchemin n'a pas d'importance. Il peut être déclenché en appuyant sur la touche flèche, en cliquant ou en faisant glisser la barre de défilement ou en utilisant la roue de la souris. Dans le code ci-dessous, nous vérifions si l'utilisateur fait défiler plus de 500 pixels et effectue des opérations.

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Dans la démo de codepen ci-dessous, si vous continuez à faire défiler et à atteindre près du bas, vous devriez voir une notification vous indiquant que vous avez presque atteint le bas de la page:

Afficher la démo de codepen

Événement de chargement de documents

jQuery a trois méthodes, qui sont déclenchées en fonction de l'état du document ou du DOM. Ce sont load, unload et ready.

load() peut être utilisé pour attacher un gestionnaire à tout élément qui charge les ressources externes telles que les images, les scripts, les iframes et window objets eux-mêmes. L'événement est licencié lorsque l'élément qu'il attache et que tous ses éléments enfants sont entièrement chargés. Lorsqu'il est utilisé avec des images, il apporte quelques problèmes. Tout d'abord, il ne bouillonnera pas correctement l'arbre Dom. Le deuxième problème est qu'il n'est ni fiable ni croisement.

Lorsque l'utilisateur quitte de la navigation Web, l'événement unload est déclenché. Cela peut être dû au fait que l'utilisateur a cliqué sur le lien, a tapé une nouvelle URL dans la barre d'adresse ou a fermé la fenêtre du navigateur. Le rechargement de la page déclenche également cet événement. Veuillez noter que l'utilisation de preventDefault() n'annulera pas l'événement unload. De plus, la plupart des navigateurs ignorent les appels à alert(), confirm() et prompt() à l'intérieur de ce gestionnaire d'événements, ce qui signifie que le code suivant ne fonctionnera pas:

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

Les deux load() et unload() ont été dépréciés depuis la version 1.8.

ready événement

Dans la plupart des cas, tous les éléments (tels que les images) n'ont pas besoin d'être entièrement chargés tant que le script peut fonctionner sans aucun problème. Ce dont vous avez besoin pour vous assurer, c'est que la hiérarchie DOM est entièrement construite. L'événement ready gère cela pour vous. Tous les gestionnaires attachés à cet événement ne seront exécutés qu'après que le DOM soit prêt. À l'intérieur du gestionnaire, vous pouvez exécuter le code jQuery ou attacher le gestionnaire d'événements à d'autres éléments sans vous en soucier.

La démonstration de codepen ci-dessous charge des images haute résolution. Vous remarquerez que le DOM est prêt avant que l'image ne soit entièrement chargée.

Afficher la démo de codepen

Si votre code dépend de la valeur de certaines propriétés de style CSS, vous devez d'abord fournir une référence à la feuille de style correspondante ou au style intégré avant de l'exécuter.

Événements de clavier

Les événements du clavier peuvent être déclenchés par l'interaction de tout utilisateur avec le clavier. Chacun de ces événements contiendra des informations sur la presse de touches et le type d'événement. Il y a trois raccourcis d'événements de clavier dans jQuery - keydown(), keyup() et keypress().

keyup et keydown événements

Comme le nom l'indique, keyup sera déclenché lorsque l'utilisateur libère la touche du clavier; keydown sera déclenché lorsque l'utilisateur appuie sur la touche du clavier. Le gestionnaire des deux événements peut être attaché à n'importe quel élément, mais seul le gestionnaire de l'élément actuellement avec focus sera déclenché.

Il est recommandé d'utiliser l'attribut which de l'objet événement pour déterminer quelle touche est enfoncée. En effet, le navigateur utilise différentes propriétés pour stocker ces informations, et jQuery normalise l'attribut which pour récupérer de manière fiable ces informations.

Une autre chose qui mérite d'être rappelée est que les deux événements ne font pas de distinction entre <kbd>a</kbd> et <kbd>shift a</kbd>. Dans ce dernier cas, <kbd>shift</kbd> et <kbd>a</kbd> sont enregistrés séparément. Dans le code ci-dessous, je montre à l'utilisateur une boîte d'alerte qui enregistre tous les événements keydown. Lorsque la touche <kbd>y</kbd> est enfoncée, un élément spécifique est supprimé du DOM.

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Afficher la démo de codepen

keypress événement

Cet événement est similaire à l'événement keydown. Une différence majeure est que les modificateurs et les clés non imprimées (comme <kbd>Shift</kbd>, <kbd>Esc</kbd>, etc.) ne déclenchent pas l'événement keypress. Quand je dis que vous ne devriez pas utiliser l'événement keypress pour capturer des clés spéciales (telles que les clés des flèches), je ne peux pas trop le mettre. Lorsque vous souhaitez savoir quel personnage (comme un ou a) vous avez entré, vous devez utiliser keypress.

Le code de code suivant cache des éléments basés sur la touche appuyée:

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

Afficher la démo de codepen

Événement de souris

Un événement de souris est déclenché lorsque l'utilisateur interagit avec un dispositif de pointage (comme une souris). Ces événements peuvent être basés sur des clics (tels que click, dblclick et contextmenu) ou basés sur le mobile (tels que mouseenter, mouseleave et mousemove). Dans cette section, je discuterai brièvement de tous ces événements et inclurai quelques démonstrations pour illustrer les légères différences entre elles.

Événements basés sur un clic

jQuery définit cinq méthodes d'événements basés sur un clic. Les événements mousedown et mouseup (comme le montrent le nom) sont licenciés lorsque l'utilisateur appuie et libère le bouton de la souris sur l'élément, respectivement. D'un autre côté, l'événement click est déclenché uniquement lorsque le bouton de la souris est enfoncé sur l'élément spécifié puis libéré.

dblclick légèrement compliqué. Pour que les événements soient enregistrés comme dblclick, il devrait y avoir deux clics de souris rapides avant l'expiration d'un intervalle de comptage lié au système. Vous ne devez pas attacher le gestionnaire à la fois click et dblclick d'un seul élément, car les événements déclenchés par un double clic sont spécifiques au navigateur. Certains navigateurs peuvent enregistrer deux événements à un seul clic avant de double-cliquer, tandis que d'autres ne peuvent enregistrer qu'un seul événement de clic avant de double-cliquer.

L'événement contextmenu est déclenché après clic droit sur l'élément mais avant que le menu contextuel ne soit affiché. Cela signifie que vous pouvez utiliser le code correspondant dans le gestionnaire d'événements pour empêcher le menu contextuel par défaut de s'afficher.

Le code d'extrait de code suivant empêche l'affichage du menu contextuel par défaut lorsqu'il est en clic droit, mais affiche plutôt un menu personnalisé:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Cette démo applique le style CSS à l'image lorsque vous cliquez sur une image et dispose d'un menu contextuel personnalisé:

Afficher la démo de codepen

événements mobiles

Certains événements sont basés sur le mouvement du pointeur de la souris, entrant ou supprimant un élément. Il existe six méthodes d'événements mobiles.

Commençons par les événements mouseover et mouseenter. Comme son nom l'indique, les deux événements sont tirés lorsque le pointeur de la souris entre dans un élément. De même, lorsque le pointeur de souris quitte l'élément, les événements mouseleave et mouseout sont tirés.

Une différence entre

mouseleave et mouseout est que la première n'est tirée que lorsque le pointeur de la souris se déplace à l'extérieur de l'élément qui le lie. D'un autre côté, même pour le mouvement en dehors de tous les descendants de l'élément, mouseout sera déclenché. Il y a exactement la même différence entre mouseenter et mouseover.

Afficher la démo de codepen

Voyons comment l'événement compte le changement en fonction du mouvement de la souris, mouseenter et mouseover. Essayez d'entrer dans la grande boîte bleue à droite et arrêtez-vous avant d'entrer dans la boîte rose à droite. mouseenter et mouseover devraient désormais avoir des valeurs de 1. Si vous vous déplacez à gauche et entrez dans la boîte rose, le nombre mouseover passera à 2. Cela se produit parce que l'événement de mouseover bouillonne. L'événement mouseover sur la boîte rose "Bubles" à la boîte bleue extérieure, augmentant le nombre de l'événement mouseover par 1. L'événement mouseover se déclenche à nouveau lorsque vous vous déplacez plus vers la gauche et s'arrête entre les deux boîtes roses. Lorsque vous atteignez l'extrémité gauche de la boîte bleue, le nombre de l'événement mouseover doit être 5, et le nombre de l'événement mouseenter devrait toujours être 1.

Le même raisonnement exactement peut être utilisé pour expliquer les événements du nombre de mouseleave et mouseout. Essayez de vous déplacer dans différentes directions et voyez comment le nombre change.

mousemove et hover événements

Lorsque le pointeur de la souris se déplace dans l'élément, l'événement mousemove est déclenché. Tant qu'il y a un mouvement de souris, il déclenchera même s'il est aussi petit qu'un pixel. Par conséquent, des centaines d'événements peuvent être déclenchés en très peu de temps. Comme vous pouvez l'imaginer, effectuer des opérations complexes dans un gestionnaire d'événements fera du retard d'un navigateur. Il est recommandé de rendre le gestionnaire d'événements mousemove aussi efficace que possible et de le délier s'il n'est plus nécessaire.

hover libre uniquement lorsque le pointeur de la souris entre ou quitte l'élément. Il existe deux façons d'appeler la méthode hover. Le premier est:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Ici, lorsque le pointeur de la souris entre dans l'élément, handlerIn() est exécuté lorsque le pointeur de la souris quitte l'élément. La deuxième méthode est: handlerOut()

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

Cette fois, la même fonction

sera exécutée lors de l'entrée et de la sortie de l'élément. handlerInOut

Afficher la démo de codepen

Remarque: Cette démonstration utilise l'effet du filtre CSS, qui ne prend pas en charge.

former des événements

Les formulaires sont partout sur Internet. Presque chaque utilisateur remplit le formulaire à un moment donné. JQuery a un moyen spécial de gérer les événements de forme. Ces événements peuvent être licenciés lorsque la valeur change ou perd la mise au point. Il y a sept événements de forme au total, et nous en discuterons un par un.

, blur, focus, focusin et focusout événements

Chaque fois qu'un élément gagne une mise au point, l'événement focus est déclenché. Il ne fonctionne qu'avec des éléments de forme et des balises d'ancrage. Pour déclencher une concentration sur tout autre élément, vous devez définir l'attribut tabindex de l'élément. N'oubliez pas que dans Internet Explorer, la mise au point sur les éléments cachés peut provoquer une erreur. Si vous devez déclencher l'événement focus sans définir explicitement le foyer, vous pouvez appeler la méthode triggerHandler("focus").

Chaque fois que l'élément perd le focus, l'événement blur est déclenché. Dans les navigateurs plus anciens, cet événement s'applique uniquement aux éléments de la forme.

Contrairement aux événements focus, focusin est déclenché chaque fois qu'un élément ou ses descendants se concentrent. De même, focusout est déclenché chaque fois qu'un élément ou ses descendants perdent la focalisation. Donc, si vous voulez que l'événement bouillonne, vous devez utiliser les deux événements.

select, change et submit événements

Lorsque la valeur d'un élément change, l'événement change est déclenché. Cet événement s'applique uniquement aux éléments <input>, <select> et <textarea>. Pour les cases à cocher, les boutons radio et les cases de sélection, cet événement est déclenché immédiatement après que l'utilisateur a effectué des sélections. Sur d'autres éléments, il ne tirera qu'après que l'élément perd la focalisation. Notez également que si vous modifiez la valeur de l'élément d'entrée à l'aide de JavaScript, cet événement ne sera pas déclenché.

Lorsque l'utilisateur fait des sélections de texte dans l'élément, l'événement select est déclenché. Cet événement a une portée plus limitée et ne s'applique qu'aux éléments <input> et <textarea>. Si vous souhaitez récupérer le texte sélectionné, vous devez utiliser un plugin jQuery cross-browser.

Lorsque l'utilisateur essaie de soumettre un formulaire, l'événement submit est déclenché. Vous ne pouvez attacher les gestionnaires que pour former des éléments. Pour déclencher cet événement, l'utilisateur doit cliquer sur l'élément <button>, <input type="submit"> ou <input type="image">. Fait intéressant, les événements JavaScript submit ne bouillonnent pas dans Internet Explorer. Cependant, ce comportement a été standardisé dans le navigateur depuis JQuery version 1.4.

Afficher la démo de codepen

Modifications dans jQuery 3

Depuis JQuery version 1.8, les méthodes load, error et unload ont été obsolètes. load() La méthode est intrinsèquement claire. Cette méthode peut signifier des charges Ajax ou des événements load réellement tirés. De même, la méthode error peut également être confondue avec la méthode jQuery.error(). Maintenant dans JQuery 3, ces méthodes ont finalement été supprimées. Vous devez maintenant utiliser la méthode on pour enregistrer ces auditeurs d'événements.

la pensée finale

Dans cet article, j'ai couvert les différences entre toutes les principales méthodes d'événements jQuery et des événements similaires. Savoir quand utiliser keypress au lieu de keydown peut vous aider à éviter les tracas et à gagner un temps précieux. Bien qu'il soit possible de se connecter aux événements DOM en utilisant Pure JavaScript, JQuery a une certaine normalisation des différences de croisement dans l'arrière-plan, selon les navigateurs que votre site Web / application doit prendre en charge, ce qui peut être un avantage.

Pour en savoir plus sur les événements, vous pouvez accéder à la documentation officielle de jQuery. Si vous avez des questions ou des conseils sur l'utilisation d'événements dans jQuery, veuillez laisser un commentaire.

FAQ pour les événements jQuery (FAQ)

Comment empêcher les événements de JQuery de bouillonner?

Dans jQuery, vous pouvez utiliser la méthode event.stopPropagation() pour empêcher les événements de bouillonner vers le haut de l'arbre Dom. Cette méthode empêche les événements de se propager à l'élément parent. Il convient de noter que cela n'empêche aucun comportement par défaut de se produire; Voici un exemple de la façon de l'utiliser:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Quelle est la différence entre les méthodes

et .bind() dans .live()?

Les méthodes

et .bind() dans .live() jQuery sont toutes deux utilisées pour attacher un gestionnaire d'événements à un élément. La principale différence entre eux est que .bind() ne joigne que le gestionnaire à l'élément actuel, tandis que .live() attache le gestionnaire à l'élément actuel et à tous les éléments qui correspondent au sélecteur à l'avenir. Cependant, il convient de noter que la méthode .live() a été obsolète depuis JQuery 1.7 et a été supprimée dans jQuery 1.9. Vous devez plutôt utiliser la méthode .on().

Comment déclencher un événement par programme dans jQuery?

Vous pouvez utiliser la méthode .trigger() pour déclencher des événements par programme dans jQuery. Cette méthode vous permet de déclencher manuellement un événement spécifié sur un élément. Voici un exemple:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Quel est le délégué de l'événement en jQuery et pourquoi est-il utile?

La délégation d'événements dans jQuery est une technique dans laquelle vous déléguez le traitement d'un événement à l'élément parent au lieu de lier le gestionnaire d'événements aux éléments individuels. Ceci est particulièrement utile lorsque vous avez un grand nombre d'éléments qui nécessitent un gestionnaire d'événements comme, ou lorsque vous ajoutez dynamiquement des éléments au DOM. Il améliore les performances en réduisant le nombre de gestionnaires d'événements qui doivent être liés.

Comment bloquer le fonctionnement par défaut des événements dans jQuery?

Vous pouvez utiliser la méthode event.preventDefault() pour bloquer le fonctionnement par défaut des événements dans jQuery. Cette méthode empêche le fonctionnement par défaut de l'événement de se produire. Par exemple, il peut empêcher les liens de suivre les URL.

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

Quelle est la différence entre .click() et .on('click') dans jQuery?

La méthode .click() en jQuery est l'abréviation de .on('click'). Les deux méthodes joignent le gestionnaire d'événements de clic à l'élément sélectionné. Cependant, la méthode .on() offre une plus grande flexibilité car elle peut également gérer des événements d'éléments ajoutés dynamiquement et peut gérer plusieurs événements à la fois.

Comment détecter l'événement à double clic à jQuery?

Vous pouvez utiliser la méthode .dblclick() pour détecter les événements de double clic dans jQuery. Cette méthode attache une fonction qui s'exécute lorsqu'un événement à double clic se produit sur l'élément sélectionné. Voici un exemple:

$(window).unload(function() {
  alert("请不要离开！"); // 不起作用。
});

Comment lier plusieurs événements aux éléments de jQuery?

Vous pouvez utiliser la méthode .on() pour lier plusieurs événements aux éléments de jQuery. Cette méthode vous permet de joindre plusieurs gestionnaires d'événements à l'élément sélectionné. Voici un exemple:

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // y的键码
      $("#element").remove(); // 从DOM中删除元素
      break;
  }
});

Comment introduire le gestionnaire d'événements à jQuery?

Vous pouvez utiliser la méthode .off() pour dériver le gestionnaire d'événements dans jQuery. Cette méthode supprime le gestionnaire d'événements attaché à l'aide de .on(). Voici un exemple:

$("body").keypress(function(event) {
  switch (event.keyCode) {
    case 75:
      // 75在keypress事件中代表大写K
      $(".K").css("display", "none");
      break;
  }
});

Comment détecter l'événement de clic droit à JQuery?

Vous pouvez utiliser la méthode .contextmenu() ou vérifier la propriété "quelle" de l'objet événement dans l'événement mousedown pour détecter l'événement à clic droit dans jQuery. La propriété "quelle" sera 3 pour un clic droit. Voici un exemple:

$("img").contextmenu(function(event) {
  event.preventDefault();
  $("#custom-menu")
    .show().css({
      top: event.pageY + 10,
      left: event.pageX + 10
      // 在鼠标点击附近显示菜单
    });
});

$("#custom-menu #option").click(function() {
   $("img").toggleClass("class-name");
   // 切换图像类。
});

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!