Javascript：全局元素焦點偵聽器

我正在嘗試設置偵聽器，偵聽所有焦點事件。特別是我試圖傾聽任何時候輸入或文本框獲得焦點。每一些研究中，被廣泛接受的方式來實現這一目標是這樣的：Javascript：全局元素焦點偵聽器

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

來源

2013-04-08 ryandlf

你在哪裏運行這段代碼？在''？或者''的某處？在''中運行代碼時，我不認爲'document.body'可用... ...不確定 – Ian 2013-04-08 14:41:12

單獨的js文件。根本不在html中。 – ryandlf 2013-04-08 14:41:54

但是，您的HTML中包含的JS文件在哪裏？ – Ian 2013-04-08 14:42:39

由於有些事件（焦點，模糊，變化）不會冒泡，所以我建議您嘗試使用Event Capturing。首先onfocus將無法正常工作，因此您必須使用addEventListener，您可以在第三個參數中指定使用的委派模式。請使用addEventListener查看MDN。

並關注此article以瞭解關於將焦點事件委派給上位的更多信息。

來源

2013-04-08 14:51:04 user1983983

精美的作品。偉大的文章也是如此。我總是想知道eventListener結束時的錯誤！用一些工作代碼更新OP。 – ryandlf 2013-04-08 15:06:50

的focus event確實從元素到他們祖先的元素，所以你不能使用事件代表團不要泡（鉤住身邊的body，看到它爲body的所有後代）來檢測它。

有一個更新的事件，focusin（微軟的一項創新，現在也可以在其他瀏覽器中使用），它確實有泡沫，因此可能會對您有用，具體取決於您希望支持哪些瀏覽器。

來源

2013-04-08 14:44:02

看到這個有趣的文章的進一步信息和一個很好的黑客：http：//www.quirksmode .org/blog/archives/2008/04/delegating_the.html – 2013-04-08 14:46:50

當然，如果您願意使用庫，jQuery可以通過跨瀏覽器的方式「聚焦」和「模糊」泡泡，而無需擔心它。 – 2013-04-08 14:48:51

Javascript：全局元素焦點偵聽器

回答

相關問題