为什么将 focusout 与 jQuery 结合使用对 Firefox 有效，而使用 addEventListener 却不起作用？

Question

我在 MDN 中读到 focusout 在 Firefox 上不起作用，但为什么将它与 jQuery 一起使用会起作用。 jQuery背后的魔法是什么？谢谢。

$(".input1").on("focusout", function() {
    console.log("jquery focusout");
});

document.querySelector(".input2").addEventListener("focusout",  function(){
 console.log("focusout");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<input class="input1" type="text" />
<input class="input2" type="text" />

Answer 1

因为它是not supported in Firefox and jQuery has workaround for that（基本上，将其翻译成blur事件侦听器）。

Answer 2

jQuery 通过使用标准 focus 和 blur 事件并为 addEventListener.

设置捕获阶段参数来解决这个问题

Here is the relevant source file.

在你的例子中，你可以替换：

document.querySelector(".input2").addEventListener("focusout",  function(){
    console.log("focusout");
});

有：

document.querySelector(".input2").addEventListener("blur",  function(){
    console.log("focusout");
}, true);

JSFiddle

$(".input1").on("focusout", function() {
    console.log("jquery focusout");
});

document.querySelector(".input2").addEventListener("blur",  function(){
    console.log("focusout");
}, true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<input class="input1" type="text" />
<input class="input2" type="text" />

为什么将 focusout 与 jQuery 结合使用对 Firefox 有效，而使用 addEventListener 却不起作用？

Why using focusout with jQuery works for Firefox while using addEventListener doesn't?

javascript

firefox

jquery

focusout