jquery - 事件冒泡和捕获的常见实际用途示例？

Question

有人可以在 jQuery/javascript 中提供事件冒泡和事件捕获的实用日常示例吗？我看到各种各样的例子展示了这些概念，但它们似乎总是你在常规网络应用程序中永远不需要的东西。

描述和代码片段将不胜感激。

Answer 1

实际事件冒泡？

使用或不使用 jQuery（请记住，您可以在不使用库的情况下处理冒泡事件）在许多场景中，您希望构建代码以利用冒泡。

一个例子：假设您有一个页面，其中元素正在动态创建，但您想要处理对这些元素的点击。您不能在它们存在之前将事件处理程序直接绑定到它们，但是在创建它们时将单个处理程序绑定到它们有点痛苦。相反，将事件处理程序绑定到容器对象：单击事件将从单个元素冒泡到容器，但您仍然可以判断单击了哪个元素 - 如果您使用.on(), 或.delegate()(甚至.live()如果您有一个非常旧版本的 jQuery），因为它设置this为单击的元素。

<div id="someContainer"></div>

$("#someContainer").on("click", ".dynamicElement", function() {
    // this is the element, do something with it
});

这表示在单击“someContainer”div 的子级“dynamicElement”类的元素时会执行某些操作。无论“dynamicElement”元素在页面加载时是否存在、后来添加以响应某些其他用户操作，或者是否使用 Ajax 加载，它都会起作用。

Answer 2

我将图像动态添加到 div，我计划使用事件冒泡来捕获包含 div 中的 onload 事件。