在本教程中，我们将学习jQuery中的事件委托。

jQuery中的事件委托是将事件处理程序添加到目标元素的父元素的过程。
因此，父元素然后将事件处理程序委托给子元素。

场合

可以说，我们有一个"主题"页面，该页面中显示了20个主题。

每个主题都包含在具有"主题"类的div中。
当我们单击div时，将显示主题详细信息。

以下是该页面HTML。

<div id="topic-container">
  <div class="topic">
    <h3>Bootstrap</h3>
  </div>
  <div class="topic">
    <h3>CSS</h3>
  </div>
</div>

如果您看上面的图片，您可以看到我们有一个主题页面，其中显示了一些主题。
我们有一个加号(+)按钮来添加新主题。

添加点击事件处理程序

如果我们要将click事件添加到具有" topic"类的div中，则可以编写以下代码。

$(".topic").on("click", function(){
  
  //topic detail code goes here...

});

这段代码会将click事件添加到页面中所有具有" topic"类的div中。

问题

但是，这种方法存在问题。

我们说有20个主题，因此，通过这种方法，我们必须将click事件处理程序添加到具有" topic"类的20个div中。

即，遍历整个页面。
寻找具有"主题"类的div。
并将click事件处理程序添加到div中。

并且，如果用户添加了新主题，则单击事件处理程序将不会应用于具有"主题"类的新添加的div。

这是因为on()方法会将点击事件处理程序添加到执行该页面时在页面中所有具有" topic"类的div中。
而且，稍后在页面上附加了具有"主题"类的任何新div都不会获得click事件处理程序。

on()方法无法将事件处理程序添加到以后添加的元素中。

为了解决这个问题，我们使用事件委托方法。

活动委托

在这种情况下，我们将事件处理程序添加到目标元素的父级。
然后，我们让父元素将事件处理程序委托给子元素。

在以下示例中，我们将具有类" topic"的div的click事件处理程序添加到其父级(即具有id" topic-container"的div)。

$("#topic-container").on("click", ".topic", function() {

  //add some click handling code here...

});

因此，现在，如果用户在主题容器div中添加了新的主题div，则click事件将被委派给它。

语法

因此，要使用on()方法将事件处理程序添加到任何元素，我们使用以下语法。

$(selector).on(event, function() {
  //some code goes here...
});

例

$(".topic").on("click", function() {
  //some code here...
});

当我们想委托事件时，我们使用以下on()方法语法。

$(selector).on(event, delegateSelector, function() {
  //some code goes here...
});

例

$("#topic-container").on("click", ".topic", function() {
  //some code here...
});