Alle Verwendungen von jquery on

jQuery ist eine beliebte JavaScript-Bibliothek, die verschiedene Funktionen bietet, um die JavaScript-Programmierung einfacher und schneller zu machen. Unter diesen ist die Methode .on() in jQuery eine sehr praktische Methode, mit der Entwickler dynamische Ereignisse erstellen, Ereignishandler binden und Ereignis-Listener hinzufügen können. In diesem Artikel werden alle Verwendungsmöglichkeiten der Methode .on() vorgestellt. .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. Grundlegende Syntax

.on()-Methode wird zum Hinzufügen von Ereignishandlern und Ereignis-Listenern verwendet. Ihre grundlegende Syntax lautet wie folgt: 🎜rrreee🎜Unter ihnen 🎜

selector: wird verwendet, um das Element auszuwählen, das an das Ereignis gebunden werden soll. Dabei kann es sich um einen CSS-Selektor oder ein jQuery-Objekt handeln >: Gibt das zu bindende Element an. Bestimmte Ereignistypen, wie z. B. click, mousedown, mousemove usw.;

childSelector: Optionale Parameter, die zum Filtern von Nachkommenelementen verwendet werden, die an Ereignisse gebunden werden sollen.

data: Optionale Parameter, Parameter, die an den Ereignishandler übergeben werden;

function: Gibt den zu bindenden Event-Handler an, der eine integrierte Funktion, eine benutzerdefinierte Funktion oder eine anonyme Funktion sein kann.

2. Verwendung der .on()-Methode

🎜.on()-Methode hat viele Verwendungsmöglichkeiten, wie folgt Werde sie einzeln vorstellen. 🎜

1. Abhören eines einzelnen Ereignisses

🎜Das folgende Beispiel fügt einen click-Ereignis-Listener für alle button-Elemente hinzu: 🎜rrreee🎜Darüber hinaus Die .on()-Methode unterstützt auch andere Ereignistypen, wie z. B. mousedown, mousemove, keydown usw. 🎜

2. Mehrere Ereignisse abhören

🎜Die Methode .on() unterstützt auch das Binden mehrerer Ereignisse. Das folgende Beispiel fügt button hinzu element.code>click, mousedown und mouseup Ereignis-Listener: 🎜rrreee

3 Geben Sie Nachkommenelemente an

🎜.on ( )-Methode unterstützt auch das Filtern von Nachkommenelementen, um Ereignisse zu binden. Im folgenden Beispiel wird clickzu allen li-Elementen im ul-Element hinzugefügt . >Ereignis-Listener: 🎜rrreee

4. Lösen Sie mehrere Ereignisse gleichzeitig aus

🎜Indem Sie mehrere Ereignistypen als Parameter an die Methode on() übergeben, können Sie diese Ereignisse gleichzeitig auslösen Geben Sie Folgendes ein, um einen Ereignis-Listener hinzuzufügen: 🎜rrreee

5. Verwenden von Ereignis-Bubbling

🎜Durch die Verwendung von Ereignis-Bubbling können Sie Ereignisse an dynamische Elemente binden, d. h. Ereignishandler an übergeordnete Elemente binden , Wenn ein Ereignis für ein untergeordnetes Element ausgelöst wird, breitet sich das Ereignis vom untergeordneten Element zum übergeordneten Element aus und löst den Ereignishandler aus. 🎜🎜Das folgende Beispiel fügt click-Ereignis-Listener zu allen button-Elementen und ihren dynamisch hinzugefügten untergeordneten Elementen hinzu: 🎜rrreee

6.🎜Manchmal Es ist notwendig, zusätzliche Daten an den Ereignishandler zu übergeben, was über den Parameter data der Methode .on() erreicht werden kann. Das folgende Beispiel übergibt zusätzliche Daten an alle button-Elemente: 🎜rrreee

3. Zusammenfassung

🎜.on()-Methode bietet umfangreiche Funktionen Helfen Sie Entwicklern, dynamische Ereignisse zu erstellen, Ereignishandler zu binden und Ereignis-Listener hinzuzufügen. In diesem Artikel werden alle Verwendungsmöglichkeiten der Methode .on() vorgestellt, einschließlich: 🎜

• Abhören eines einzelnen Ereignisses
• Abhören mehrerer Ereignisse
; >
• Untergeordnete Elemente angeben;
• Mehrere Ereignisse gleichzeitig auslösen;
• Ereignis-Bubbling verwenden;

🎜Eine kompetente Beherrschung der Verwendung der Methode .on() kann die Effizienz der JavaScript-Programmierung erheblich verbessern. 🎜

Das obige ist der detaillierte Inhalt vonAlle Verwendungen von jquery on. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!