Javascript: Global Element Fokus-Listener

Question

Ich versuche, einen Listener einzustellen, der auf alle Fokusereignisse wartet. Insbesondere versuche ich zu hören, wann immer eine Eingabe oder Textbox den Fokus erhält. Per einige der Forschung, ist die weithin akzeptierte Weg, dies zu erreichen, wie folgt aus:

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

Aber die document.body.onfocus scheint nicht, jemals zu schießen. Ich dachte, es sein könnte, weil das Dokument tatsächlich nicht immer den Fokus erhalten und so versuchte ich:

document.body.focus(); 

Um zunächst „Set“ den Fokus, aber das funktioniert auch nicht.

Irgendwelche Ideen, wie ich ein Fokusereignis auf alle Eingaben/Textfelder hören kann, ohne das Ereignis direkt auf das Element selbst zu setzen? Vanilla Javascript nur bitte, ich benutze kein Framework.

Pro die akzeptierte Antwort hier einige Arbeitscode:

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 

Answer 1

Da einige Ereignisse (Fokus, Unschärfe, Veränderung) nicht aufblähen, würde ich Ihnen empfehlen, stattdessen Event Capturing auszuprobieren. Zunächst einmal funktioniert onfocus nicht, deshalb müssen Sie addEventListener verwenden, wo Sie den verwendeten Delegierungsmodus im dritten Argument angeben können. Betrachten Sie MDN für die Verwendung von addEventListener.

Und sehen Sie sich diese article für weitere Informationen über das Delegieren des Fokus-Ereignisses an.

Answer 2

Die focus event nicht Blase aus Elementen bis zu ihren Vorfahren Elemente, so dass Sie keine Ereignis Delegation (Einhaken es auf body verwenden können und zu sehen, es für alle Nachkommen von body), um es zu erkennen.

Es gibt ein neueres Ereignis, focusin (eine Microsoft-Innovation, jetzt auch in anderen Browsern verfügbar), die bubble, so dass für Sie je nach Browsern, die Sie unterstützen möchten, funktioniert.