Question

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

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

Answer 1

由于某些事件（焦点，模糊，变化）没有冒泡，我建议您尝试使用Event Capturing。首先onfocus不适用于此，因此您必须使用addEventListener，您可以在第三个参数中指定使用的委派模式。请MDN查看addEventListener的使用情况。

并查看此article以获取有关委派焦点事件的更多信息。

Answer 2

focus event不会从元素冒泡到其祖先元素，因此您无法使用事件委派（在body上挂钩并查看body的所有后代）检测它。

有一个较新的事件，focusin（微软的一项创新，现在也可以在其他浏览器中使用），它会冒泡，因此根据您想要支持的浏览器，这可能对您有用。

Javascript：全球元素焦点监听器

2 个答案: