13

すべてのフォーカス イベントをリッスンするリスナーを設定しようとしています。特に、入力またはテキストボックスがフォーカスされるたびにリッスンしようとしています。いくつかの調査によると、これを達成するための広く受け入れられている方法は次のようなものです。

document.body.onfocus = function(event) {
   //Check the event.target for input/textbox
   //Do something
};

しかし、document.body.onfocus は起動していないようです。ドキュメントが実際にフォーカスを受け取らないためかもしれないと思ったので、試しました：

document.body.focus();

最初にフォーカスを「設定」しますが、これも機能しません。

実際に要素自体にイベントを直接設定せずに、すべての入力/テキストボックスでフォーカスイベントをリッスンする方法についてのアイデアはありますか? バニラ JavaScript のみでお願いします。私はフレームワークを使用していません。

受け入れられた回答ごとに、ここにいくつかの実用的なコードがあります:

var focusHandler = function(event) {
    var type = event.target.nodeName.toLowerCase();
    if(type == 'input' || type == 'textarea') {
        //Do something
    }
};
document.body.addEventListener('focus', focusHandler, true); //Non-IE   
document.body.onfocusin = focusHandler; //IE
4

2 に答える 2

9

一部のイベント (フォーカス、ぼかし、変更) はバブルアップしないため、Event Capturing代わりに試してみることをお勧めします。まず第一に、これでは機能しないため、3 番目の引数で使用される委任モードを指定できる場所onfocusを使用する必要があります。の使用についてはMDNaddEventListenerを参照してください。また、フォーカス イベントの委任に関する詳細については 、この記事を参照してください。addEventListener

于 2013-04-08T14:51:04.057 に答える
6

focusイベントは要素からそれらの祖先要素までバブルしないため、イベントの委譲 (フックしてbodyのすべての子孫に対してそれを確認するbody) を使用してそれを検出することはできません。

新しいイベントfocusin(Microsoft のイノベーションで、他のブラウザーでも利用できるようになりました) があります。これはバブリングするので、サポートしたいブラウザーによってはうまくいくかもしれません。

于 2013-04-08T14:44:02.907 に答える