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

【问题标题】：Examples of common, practical uses of event bubbling and capturing?事件冒泡和捕获的常见实际用途示例？
【发布时间】：2012-03-03 12:18:35
【问题描述】：

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

非常感谢描述和代码 sn-ps。

【问题讨论】：

标签： jquery event-handling event-bubbling event-capturing

【解决方案1】：

实际事件冒泡？

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

举个例子：假设您有一个页面，其中的元素是动态创建的，但您想处理对这些元素的点击。您不能在它们存在之前将事件处理程序直接绑定到它们，但是在创建它们时将单个处理程序绑定到它们有点痛苦。相反，将事件处理程序绑定到容器对象：单击事件将从单个元素冒泡到容器，但您仍然可以判断单击了哪个元素 - 如果您使用 .on() 的适当语法，jQuery 可以轻松完成此操作，或者.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 加载，它都会起作用。

【讨论】：

感谢 nnnnnn，我经常使用您提到的特定示例。我想知道你是否也可以分享其他的？谢谢！
....我想这也更有效，注册一个监听器而不是注册多个监听器。

【解决方案2】：

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

【讨论】：

onload 是要知道图像何时真正呈现在屏幕上？可以给个代码sn-p吗？
没错，就是渲染好的时候，所以你可以设置display = 'inline'来显示图片。这将规范用户在图像下载之前看到的内容（而不是浏览器人员的小可爱图像）。抱歉，还没有 sn-ps。
-@pure_code，您能解释一下为什么您的示例符合事件冒泡的条件吗？我想对您的回答投赞成票，但首先要确保它对未来的访问者足够有用。
...这是一对多的关系，我有很多图像，当事件发生时，它们会（内部）分派（内部）他们的事件，直到包含 div（甚至更远），div将充当阻塞点来捕获“气泡”并使用来自事件参数的信息。