Toutes les utilisations de jquery sur

jQuery est une bibliothèque JavaScript populaire qui fournit diverses fonctionnalités qui rendent la programmation JavaScript plus facile et plus rapide. Parmi elles, la méthode .on() dans jQuery est une méthode très pratique qui peut aider les développeurs à créer des événements dynamiques, à lier des gestionnaires d'événements et à ajouter des écouteurs d'événements. Cet article présentera toutes les utilisations de la méthode .on(). .on()方法是一种非常实用的方法，可以帮助开发者创建动态的事件、绑定事件处理程序和添加事件监听器。本文将介绍.on()方法的所有用法。

一、基本语法

.on()方法用于添加事件处理程序和事件监听器，其基本语法如下：

$(selector).on(event,childSelector,data,function);

其中，

• selector：用于选择要绑定事件的元素，可以是CSS选择器或者jQuery对象；
• event：指定要绑定的事件类型，例如click、mousedown、mousemove等；
• childSelector：可选参数，用于过滤要绑定事件的后代元素；
• data：可选参数，传入事件处理程序中的参数；
• function：指定要绑定的事件处理程序，可以是内置函数、用户定义的函数或者匿名函数。

二、.on()方法的用法

.on()方法具有多种用法，以下将一一介绍。

1. 监听单个事件

下面的示例将为所有button元素添加click事件监听器：

$("button").on("click", function() {
  alert("你单击了按钮！");
});

此外，.on()方法还支持其他的事件类型，例如mousedown、mousemove、keydown等。

2. 监听多个事件

.on()方法还支持绑定多个事件，以下示例将为button元素添加click、mousedown和mouseup事件监听器：

$("button").on("click mousedown mouseup", function() {
  alert("你与按钮交互了！");
});

3. 指定后代元素

.on() 方法还支持过滤要绑定事件的后代元素，以下示例将为ul元素中的所有li元素添加click事件监听器：

$("ul").on("click", "li", function() {
  alert("你单击了列表项！");
});

4. 一次触发多个事件

通过将多个事件类型作为参数传递给on()方法，可以一次性为这些事件类型添加事件监听器，例如以下示例：

$("button").on({
  mouseenter: function() {
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function() {
    $(this).css("background-color", "white");
  },
  click: function() {
    $(this).css("background-color", "yellow");
  }
});

5. 使用事件冒泡

通过使用事件冒泡，可以为动态元素绑定事件，即将事件处理程序绑定到父元素，当子元素上触发事件时，事件将从子元素向上冒泡至父元素并触发事件处理程序。

以下示例将为所有的button元素及其动态添加的子元素添加click事件监听器：

$("button").on("click", function() {
  alert("你单击了按钮！");
});

// 动态添加元素
$("button").append("新增按钮");

6. 传入数据

有时需要将附加数据传递给事件处理程序，可以通过.on()方法的data参数来实现。以下示例将为所有的button元素传递附加数据：

$("button").on("click", {
  name: "小明",
  age: 18
}, function(event) {
  alert("我的名字是 " + event.data.name + "，" + "我今年 " + event.data.age + "岁。");
});

三、总结

.on()方法提供了丰富的功能，可以帮助开发者创建动态的事件、绑定事件处理程序和添加事件监听器。本文介绍了.on()方法的所有用法，包括：

• 监听单个事件；
• 监听多个事件；
• 指定后代元素；
• 一次触发多个事件；
• 使用事件冒泡；
• 传入数据。

熟练掌握.on()

1. Syntaxe de base

La méthode .on() est utilisée pour ajouter des gestionnaires d'événements et des écouteurs d'événements. Sa syntaxe de base est la suivante : # 🎜🎜 #rrreee#🎜🎜#Parmi eux, #🎜🎜#

• selector : utilisé pour sélectionner l'élément à lier à l'événement, qui peut être un sélecteur CSS ou jQuery object ;
• event : spécifiez le type d'événement à lier, tel que click, mousedown, mousemove , etc.;
• childSelector : paramètre facultatif, utilisé pour filtrer les éléments descendants à lier aux événements
• data : paramètre facultatif, Transmettez les paramètres dans le gestionnaire d'événements ;
• fonction : Spécifiez le gestionnaire d'événements à lier, qui peut être une fonction intégrée, un fonction définie par l'utilisateur ou une fonction anonyme.

2. Utilisation de la méthode .on()

#🎜🎜#.on() a de nombreuses utilisations seront présentés un par un ci-dessous. #🎜🎜#

1. Écoute d'un seul événement

#🎜🎜#L'exemple suivant ajoutera un écouteur d'événement click à tous les éléments button : #🎜 🎜#rrreee#🎜🎜#De plus, la méthode .on() prend également en charge d'autres types d'événements, tels que mousedown, mousemove , keydownetc. #🎜🎜#

2. Écoutez plusieurs événements

#🎜🎜#La méthode .on() prend également en charge la liaison de plusieurs événements. L'exemple suivant sera button<. ajoutez les d>click</.>, mousedown et mouseup à l'élément /code> : #🎜🎜#rrreee

3. La méthode /code> h3>#🎜🎜#.on() prend également en charge le filtrage des éléments descendants à lier aux événements. L'exemple suivant filtrera tous les liul<.>. Ajoutez un écouteur d'événement <code>click à l'élément /code> : #🎜🎜#rrreee

4 Déclenchez plusieurs événements à la fois

#🎜🎜#En en passant plusieurs. types d'événements en tant que paramètres de la méthode on(), vous pouvez ajouter des écouteurs d'événements à ces types d'événements à la fois, comme dans l'exemple suivant : #🎜🎜#rrreee

5 Utiliser le bouillonnement d'événements

h3>#🎜🎜# En utilisant le bouillonnement d'événements, vous pouvez lier des événements à des éléments dynamiques, c'est-à-dire lier un gestionnaire d'événements à l'élément parent. Lorsqu'un événement est déclenché sur un élément enfant, l'événement bouillonne à partir de l'élément enfant. à l'élément parent et déclencher le gestionnaire d'événements. #🎜🎜##🎜🎜#L'exemple suivant ajoutera un écouteur d'événement click à tous les éléments button et à leurs éléments enfants ajoutés dynamiquement : #🎜🎜#rrreee

6. Transmission de données

#🎜🎜#Parfois, il est nécessaire de transmettre des données supplémentaires au gestionnaire d'événements, ce qui peut être fait via le paramètre data de .on() méthode accomplie. L'exemple suivant transmettra des données supplémentaires à tous les éléments button : méthode #🎜🎜#rrreee

3 Summary

#🎜🎜#.on(). Fournit des fonctions riches pour aider les développeurs à créer des événements dynamiques, à lier des gestionnaires d'événements et à ajouter des écouteurs d'événements. Cet article présente toutes les utilisations de la méthode .on(), notamment : #🎜🎜#

• Écouter un seul événement
• Écouter plusieurs événements ;
• Spécifiez les éléments descendants ;
• Déclenchez plusieurs événements à la fois ;
• Utilisez le bouillonnement d'événements
• Transmettez les données.

#🎜🎜# La maîtrise de la méthode .on() peut grandement améliorer l'efficacité de la programmation JavaScript. #🎜🎜#

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!