Quelle est la fonction de l'événement de liaison jquery

La fonction de l'événement de liaison jquery : lier les événements ordinaires aux nœuds DOM Lorsque le nœud DOM est sélectionné, liez-y l'événement pour permettre aux utilisateurs de fournir les opérations correspondantes. jQuery fournit quatre méthodes de liaison d'événements, à savoir bind, live, délégué et on, et les fonctions de désécoute correspondantes sont unbind, die, undelegate et off.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.

Qu'est-ce qu'un événement ?

La réponse de la page aux différents visiteurs s'appelle un événement.

Les gestionnaires d'événements font référence à des méthodes appelées lorsque certains événements se produisent en HTML.

Exemple :

• Déplacez la souris sur l'élément.

• Sélectionner le bouton radio

• Cliquer sur l'élément

Le terme « déclencheur » (ou « incendie ») est souvent utilisé dans des événements tels que : « L'événement keypress se déclenche lorsque vous appuyez sur une touche ».

liaison d'événement jquery

Habituellement, nous devons gérer des événements liés à des nœuds spécifiques, comme un clic sur un bouton. Mais il y a un problème ici. Si nous pouvons obtenir les nœuds spécifiques, bien sûr, il n'y a rien à dire. Mais parfois, le nœud que l’on souhaite traiter n’existe pas encore, mais il faut prédéfinir son traitement événementiel. Par exemple, on dit que dans une UL, lorsqu'on clique sur chaque LI, une fonction doit être exécutée. Cependant, le contenu lui-même dans UL peut changer. Au début, il n'y avait que deux LI, puis il est devenu trois LI. Le LI supplémentaire doit également être capable de répondre aux événements.

La situation ci-dessus est une exigence courante. Nous pouvons utiliser le mécanisme de bouillonnement d’événements pour atteindre notre objectif. Nous lions le traitement de l'événement à UL, de sorte que lorsque l'on clique sur LI, il remonte vers l'UL supérieur. De cette façon, lors du traitement de l'événement, nous pouvons déterminer à quel nœud appartient l'événement pour l'étape suivante.

La liaison d'événement est un événement pour l'élément dom. Elle est liée à l'élément dom et peut surveiller le même événement plusieurs fois sur un élément. Fonction : Lier les événements ordinaires aux nœuds DOM Lorsque le nœud DOM est sélectionné, liez-y l'événement pour permettre aux utilisateurs de fournir les opérations correspondantes.

jQuery propose quatre méthodes de liaison d'événements, à savoir bind, live, délégué et on. Les fonctions de désécoute correspondantes sont dissocier, mourir, annuler la délégation et désactiver.

Les différences entre ces méthodes :

1. La fonction bind() ne peut définir des événements que pour les éléments existants ; mais live(), on() et délégué() prennent tous en charge les nouveaux ajouts dans le futur. pour les éléments ;

2. La fonction bind() était relativement populaire avant la version 1.7 de jquery. Après la sortie de la version 1.7, bind() n'était officiellement plus recommandée et la fonction alternative est on(), qui est également nouvellement ajoutée dans version 1.7., peut également être utilisée pour remplacer la fonction live(). La fonction live() a été supprimée dans la version 1.9. La fonction live() et la fonction délégué() sont similaires, mais la fonction live() est similaire. () est plus rapide à exécuter. Elle est pire que délégué() en termes de flexibilité et de prise en charge du sélecteur CSS. 4. bind() prend en charge toutes les versions de Jquery() prend en charge jquery1.9-; 4.2+ ; on() prend en charge jquery1. + L'élément sélectionné est lié à une fonction d'écoute d'un type d'événement spécifique. La signification des paramètres est la suivante :

type : type d'événement, tel que clic, changement, survol de la souris, etc. .;

data : les paramètres transmis à la fonction d'écoute, obtenus via event.data arrivent. Facultatif ;

fonction : fonction d'écoute, qui peut transmettre l'objet événement. L'événement ici est l'objet événement encapsulé par jQuery, qui est différent de l'objet événement natif. Vous devez faire attention lors de son utilisation Source de Bind. code :

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

$('#myol li').bind('click',getHtml);

Caractéristiques de bind Cela signifie que l'auditeur sera lié à l'élément cible, un à un. Il n'y a aucun problème à l'utiliser lorsque les éléments de la page ne seront pas ajoutés dynamiquement. Mais si un "élément de liste 5" est ajouté dynamiquement à la liste, il n'y aura aucune réponse lorsque vous cliquerez dessus et vous devrez le lier à nouveau. Pour éviter ce problème, nous pouvons utiliser le live. jQuery a également une abréviation pour la liaison d'événement, telle que a.click(function(){});, a.change(function(){});, etc. Leurs fonctions sont les mêmes que bind, elles sont juste abréviations.

2. live(type, [data], fn)

Les paramètres de live sont les mêmes que ceux de bind. Qu'est-ce qui ne va pas ? la méthode live ne fait pas L'auditeur est lié à lui-même (ceci), mais à ce contexte. Quel est ce contexte ? En fait, il s'agit de la portée limitée de l'élément. Cela deviendra clair après la lecture du code suivant :

$('#myol li').context; //document

$('#myol li','#myol').context; //document

$('#myol li',$('#myol')[0]); //ol

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来 完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的 节点。下面的例子来揭晓：

$('#myol li').live('click',getHtml);

3、delegate和on

live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：

$('#myol').delegate('li','click',getHtml);

看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：

on(type,[selector],[data],fn)

参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服一些吧。

我们先不传selector来看一个例子：

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己，与bind的效果一样。至于传selector进去，就是跟delegate一样的意义了，除了参数顺序不同，其他完全一样。

终于看到on的真实作用了，那么，这么多的事件绑定方式，我们该如何进行选择呢?

其实这个问题是完全不必纠结的，因为你已经知道他们之间的区别了不是么?根据实际情况斟酌使用就行。不过官方有一个推荐就是尽量使用on，因为其他 方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。至于如何代替我想就不必这么直白的写出来了，真正理 解它们的区别之后自然而然也就不是难事了。

【推荐学习：jQuery视频教程、web前端视频】

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!