全局元素焦点监听器

Javascript: Global Element Focus Listener

本文关键字：监听器 焦点 元素 全局      更新时间：2023-09-26

我正在尝试设置侦听所有焦点事件的侦听器。特别是，我试图倾听任何时候输入或文本框获得关注。根据一些研究，实现这一目标的广泛接受的方法是这样的:

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

由于一些事件(焦点，模糊，变化)不会冒泡，我建议您尝试Event Capturing代替。首先，onfocus将不适用于此，因此您必须使用addEventListener，您可以在第三个参数中指定使用的委托模式。查看MDN以了解addEventListener的使用。

关于委托焦点事件的更多信息，请参阅本文。

focus事件不会从元素冒泡到它们的祖先元素，因此您不能使用事件委托(将其挂接在body上并为body的所有后代查看它)来检测它。

有一个更新的事件，focusin(微软的创新，现在也可以在其他浏览器中使用)，它会冒泡，所以这可能适合你，这取决于你想要支持哪个浏览器。

相关文章：