jquery - $(document).on ('click' , '#id' , function() {}) vs $ ('#id' ).on ('click' , function(){})

Question

<分区>

Answer 1

第一个示例演示了事件委托(delegate)。事件处理程序绑定(bind)到 DOM 树更高层的元素(在本例中为 document)，当事件到达该元素时将被执行，该元素起源于与选择器匹配的元素。

这是可能的，因为大多数 DOM 事件从起点冒泡树。如果您单击 #id 元素，将生成一个单击事件，该事件将通过所有祖先元素冒泡(旁注:在此之前实际上有一个阶段，称为“捕获”阶段'，当事件沿着树向下到达目标时)。您可以捕获任何这些祖先的事件。

第二个示例将事件处理程序直接绑定(bind)到元素。该事件仍会冒泡(除非您在处理程序中阻止它)，但由于处理程序已绑定(bind)到目标，您将看不到此过程的效果。

通过委派事件处理程序，您可以确保它针对绑定(bind)时 DOM 中不存在的元素执行。如果您的 #id 元素是在您的第二个示例之后创建的，您的处理程序将永远不会执行。通过绑定(bind)到一个您知道在执行时肯定在 DOM 中的元素，您可以确保您的处理程序实际上将附加到某些东西并且可以在以后适本地执行。