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

Question

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

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

Answer 1

实际的事件冒泡？

无论有没有 jQuery(请记住，您可以在不使用库的情况下处理冒泡事件)，在许多情况下您都希望构建代码以利用冒泡。

一个例子:假设您有一个页面，其中的元素是动态创建的，但您想要处理对这些元素的点击。在它们存在之前，您无法将事件处理程序直接绑定(bind)到它们，但是在创建它们时将单个处理程序绑定(bind)到它们有点麻烦。相反，将事件处理程序绑定(bind)到容器对象:单击事件将从各个元素冒泡到容器，但您仍然可以知道单击了哪个元素 - 如果您使用 .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 加载的，它都会起作用。