javascript - 为什么使用 jQuery 的 focusout 对 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

因为它在 Firefox 中不受支持，而jQuery 对此有解决方法（基本上，将其转换为blur事件侦听器）。

Answer 2

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

这是相关的源文件。

在您的示例中，您可以替换：

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" />