jQuery 事件源 - JavaScript

什么是 jQuery 事件源？

jQuery 事件源是指在 jQuery 中，用于触发事件的 DOM 元素。在绑定事件时，可以通过选择器选中需要绑定事件的 DOM 元素，将其作为事件源，绑定相应的事件处理函数。

如何绑定事件源？

在 jQuery 中，使用 on 方法可以绑定事件源。它的语法如下：

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

• selector：字符串，用于选择需要绑定事件的 DOM 元素；
• event：字符串，事件类型，如 click、mousemove 等；
• childSelector：可选，字符串，用于指定需要绑定事件的子元素；
• data：可选，数据，会在事件处理函数中作为参数传入；
• function：事件处理函数。

例如，绑定一个 click 事件处理函数到 button 元素：

$("button").on("click", function() {
  alert("Hello World!");
});

如何在事件处理函数中访问事件源？

在事件处理函数中，可以使用 this 关键字来访问事件源。例如：

$("button").on("click", function() {
  $(this).hide();
});

上面的代码中，this 关键字指向触发事件的 button 元素。

使用事件委托绑定事件源

在某些情况下，需要将事件绑定到一个容器元素上，并且只处理其中某个子元素的事件。这时可以使用事件委托（即事件代理）来绑定事件源。

在 jQuery 中，使用 on 方法并指定一个子元素的选择器参数就可以将事件绑定到容器元素上。例如：

<ul id="list">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<script>
$("#list").on("click", "li", function() {
  alert("You clicked on " + $(this).text());
});
</script>

上面的代码中，将 click 事件绑定到 ul#list 元素上，并且只处理 li 元素的点击事件。当用户点击 li 元素时，会触发绑定的事件处理函数，其中 this 关键字指向被点击的 li 元素。

总结

jQuery 事件源是指用于触发事件的 DOM 元素。使用 on 方法可以绑定事件源，并在事件处理函数中通过 this 关键字访问事件源。另外，通过事件委托可以将一个事件绑定到容器元素上，并且只处理其中某个子元素的事件。