トリガフォーカスイベントは、火災は（使用警告やブラウザのコンソールなし）イベントをぼかします

Question

jsfiddle link

<input id = "focus-ipt" type = "text" value = "nothing" />

var $focusIpt = document.querySelector("#focus-ipt"); 
$focusIpt.addEventListener("blur", function (e) { 
    $focusIpt.value = "blured!"; 
}); 
setTimeout(function() { 
    $focusIpt.focus(); 
    }, 1000); 

私はフォーカスイベントをトリガしますが、blurイベントがフォーカス後に解雇。 私は長い間、コンソールを閉じて、setTimeoutを使用して検索しましたが、解決できません。どうしたのでしょうか？

Answer 1

これは実際にはではなく、です。 focus()は自動的にトリガーしません。blur()

DOMと対話しているため、blur()がトリガーされています。あなたのフィドル（RunまたはTidyなど）のボタンの1つをクリックすると、#focus-ipt要素はアクティブではなくなりました。あなたがクリックしているボタンはアクティブです。

何もせずにタイムアウトするのであれば、blur()イベントは発生しません。入力をクリックするとすぐに、blur()はになります。

これは、次の例で見ることができます。

var $focusIpt = document.querySelector("#focus-ipt"); 
 
$focusIpt.addEventListener("blur", function(e) { 
 
    $focusIpt.value = "Blurred!"; 
 
}); 
 
setTimeout(function() { 
 
    $focusIpt.focus(); 
 
}, 1000);

<input id="focus-ipt" type="text" id="myText" value="Sample Text"> 
 
<button type="button">Click me to lose focus</button>

は、この情報がお役に立てば幸い！ :)