Javascript 为焦点创建事件观察者？

有可能在原型中有焦点事件气泡吗

我试图避免在每个输入元素上都分配一个观察者

<script language="javascript" type="text/javascript">
document.observe('dom:loaded', function() {

    // Doesn't work
    $('editForm').observe('focus', function(evnt){
        console.log('FOCUS!');
    });

    // Works
    $('editForm').select('INPUT').each(function(elem) {
        elem.observe('focus', function(evnt){
            console.log('FOCUS!');
        });
    });

}); 
</script>

<form method="post" name="editForm" id="editForm" action="">
<input type="text" name="foobar" />
</form>

document.observe（'dom:loaded'，function（））{
//不起作用
$（'editForm'）。观察（'focus'，函数（evnt）{
console.log（'FOCUS！'）；
});
//工作
$（'editForm'）。选择（'INPUT'）。每个（函数（元素）{
观察要素（“聚焦”，功能（evnt）{
console.log（'FOCUS！'）；
});
});
}); 

聚焦和模糊事件不会出现气泡

您可以在捕获阶段启动事件处理程序。当使用标准DOM方法时，您可以编写

document.addEventListener('focus',function(e){/*some code */}, true);

“真实”值在这里是最重要的

问题是IE不支持捕获事件传播的阶段，但对于IE，可以使用focusin和focusout事件，这与聚焦和模糊事件不同，不会产生气泡。我推荐阅读彼得·保罗·科赫（Peter Paul Koch）写的一篇关于这个主题的文章。其他浏览器（Firefox、Opera、Safari）可能（我没有测试过）支持DOMFocusIn、DOMFocusOut等事件，它们与IE的focusin和focusout事件是等价的。

您可以使用：

function focusInHandler(event){
    Event.element(event).fire("focus:in");
}
function focusOutHandler(event){
    Event.element(event).fire("focus:out");
}

if (document.addEventListener){
    document.addEventListener("focus", focusInHandler, true);
    document.addEventListener("blur", focusOutHandler, true);
} else {
    document.observe("focusin", focusInHandler);
    document.observe("focusout", focusOutHandler);
}

document.observe('focus:in', function(event) {
    // Your code
});

我的JSFIDLE:

如果（_is_ie）{//ie仅聚焦/模糊事件侦听器f.observe（'focusin'，this.onFocus.bind（this））；f.observe（'focusout'，this.onBlur.bind（this））；否则{//Firefox&Safari聚焦/模糊事件侦听器f.addEventListener（'focus'，this.onFocus.bind（this））；f.addEventListener（'blur'，this.onBlur.bind（this），true）然后在onBlur和onFocus中，我得到元素（Event.element）并检查它的nodeName，看看我是否应该做些什么。