dispatchEventを使用したフォーカスイベント

Question

入力ボックスにdispatchEventというイベントでfocusイベントをトリガーすると、onfocusが呼び出されますが、UIでは入力ボックスがフォーカスされません。 この現象が発生する理由はありますか？

var test = document.getElementById("test"); 
test.onfocus = function(event) { 
    console.log('focused'); 
} 
var e = document.createEvent('Event'); 
e.initEvent("focus", true, true); 
test.dispatchEvent(e); 

一方、これは期待どおりに動作します。

var test = document.getElementById("test"); 
test.focus(); 

私はこれを調査していた理由は、私は、イベントをトリガするZeptoJSを使用することで、それがdispatchEventを使用しています。

Answer 1

あなたはそのイベントをリッスンする必要はありません上のイベントを発生要素は、潜在的にあるため、親要素は、そのイベントをリッスンすることができます。

イベントを手動で発生させても、そのイベントに関連付けられたデフォルトのアクションは生成されません。たとえば、手動でfocusイベントを発生させても、要素がフォーカスを受け取らない（focus()メソッドを使用する必要があります）、submitイベントを手動で発生させると、フォームは送信されません（submit()メソッドを使用します）その文字を集中テキスト入力に表示させず、リンク上で手動でクリックイベントを発生させてもリンクがアクティブ化されることはありません。UIイベントの場合、これはスクリプトを防ぐためセキュリティ上の理由から重要ですブラウザ自体と対話するユーザアクションをシミュレートします。

はまた、あなたがIE上で作業している場合は、fireEvent()を使用する必要があることに注意してください。また、dispatchEventとfireEventメソッドの主な違いは、dispatchEventメソッドがイベントのデフォルトアクションを呼び出すことです。fireEventメソッドはそうではありません。

ので解決のために、あなたがこれをテストしているブラウザでこの

test.onfocus = function(event) { 
    console.log('focused'); 
    if(! test.hasFocus()) { 
    test.focus(); 
    } 
}