jQuery on() 文档

Question

您是否认为jQuery的on()函数的文档有误（或不够清晰）？请考虑以下代码：

<div>
    <span>
        <div>
            <input type="button" value="click me!" />
        </div>
    </span>
</div>

$(document).on("click", function() {
    console.log(this.toString());
});

文档说明

selector 选择器字符串，用于过滤触发事件的选定元素的后代。如果选择器为 null 或省略，则事件总是在到达选定元素时触发。

点击按钮只会导致文档本身的一个 console.log，而 $(document).on("click", "*", function()... 则会导致多个 console.log。

我知道 Stack Overflow 社区不负责 jQuery 文档，但难道他们不应该说当选择器被省略时，事件只在到达选定元素时触发吗？或者我对事件委托的理解有误吗？

完整代码

- Adam Rackis

---

你会期望当点击#myotherdiv时，$('#mydiv').on('click',function(){ });会被触发吗？前提是相同的，它将根据你的参数是多么模糊/具体而工作。 - Brad Christie

“Reaches”这个词似乎暗示了“仅仅（only）”这个词。 - Blazemonger

不确定我是否理解，因为文档对我来说似乎非常清晰。如果你将click事件处理程序添加到$(document)，那么只有文档才具有附加的事件处理程序。如文档中所述，如果您将其添加到文档中的每个元素，则会附加到文档和所有子元素，这正是它所做的。 - Reinstate Monica Cellio

@mblase75 - 我认为你的回答是迄今为止最好的 - 你能把它变成一个答案吗？ - Adam Rackis

这也意味着，isPropagationStopped() 方法可能尚未到达正在监听事件的元素。 - zzzzBov

Answer 1

个人认为已经很清楚了。当省略选择器时，事件将在达到选定元素时触发。在我看来，“始终”这个词并没有真正改变其含义。当它到达所选元素时，事件将始终被触发（请注意，如果调用类似于stopPropagation的内容，则事件将不会到达所选元素，因此不会被触发）。

当存在选择器时，事件将在从与选择器匹配的元素源发出并到达所选元素时触发。

当您使用通用选择器 * 时，事件目标和所选元素之间的每个单个元素都会触发事件。

正如您在评论中所述， on 提供了jQuery 1.7+中绑定事件所需的所有功能：

从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的所有功能。

- James Allardice

---

看起来省略选择器可以使 on 成为 bind 的完全替代品？ $("X").bind("click", function === $("X").on("click", function ?? - Adam Rackis

的确如此。这就是 on 的全部意义，它将之前所有绑定事件的不同方式（bind、delegate 和 live）合为一体，不再需要它们了。 - James Allardice

+1 - 感谢您的回答。我想问题的根源是我没有完全阅读文档，就像Ensalija向我展示的那样。希望我不是世界上唯一遇到这个问题的开发者... - Adam Rackis

Answer 2

如果没有选择器，就无法进行事件委托。参考文档如下：

如果省略了选择器或选择器为 null，则将事件处理程序称为直接绑定。每次所选元素上发生事件时都会调用此处理程序，无论它是在元素上直接发生还是从后代（内部）元素冒泡而来。

当提供选择器时，事件处理程序被称为委托。当事件在绑定元素上直接发生时，不会调用处理程序，仅对匹配选择器的后代（内部）元素调用处理程序。jQuery 将事件从事件目标向上冒泡到附加处理程序的元素（即从最内层到最外层元素），并在该路径上运行与选择器相匹配的任何元素的处理程序。

基本上，`.on` 执行了 jQuery 的操作，它会根据参数完全执行不同的功能。个人更喜欢使用 `.delegate` 进行委托，并使用 `.bind` 进行普通事件处理，因为它们更明确，希望它们不会在以后的版本中被删除。

- Esailija

---

微笑 谢谢 - 差劲的开发者，更耐心地阅读文档，责打，差劲的开发者... - Adam Rackis