javascript - jQuery で focusout を使用すると Firefox で機能するのに、addEventListener を使用すると機能しないのはなぜですか?

Question

focusoutFirefox では動作しないMDN を読みましたが、なぜ 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" />