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

Question

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

非常感谢描述和代码片段。

Answer 1

实际活动冒泡？

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

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

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

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

这说明点击一个带有“dynamicElement”类的元素，这是“someContainer”div的一个孩子。无论“页面加载”中是否存在“dynamicElement”元素，稍后是为响应其他一些用户操作而添加，还是加载了Ajax，它都可以正常工作。

Answer 2

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