创建焦点的事件观察者？

Question

是否有可能让焦点事件在原型中冒泡？

我试图阻止必须在每个输入元素上分配一个观察者.

<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>

Answer 1

焦点和模糊事件不会冒泡.

您可以在捕获阶段触发事件处理程序.使用标准DOM方法时,您可以编写

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

"真正的"价值在这里最为重要.

问题是IE不支持捕获事件传播的阶段,但是对于IE,你可以使用focusin和focusout事件,这与焦点和模糊事件不同,它们会冒泡.我建议阅读Peter Paul Koch撰写的关于这个主题的文章.其他浏览器(Firefox,Opera,Safari)可能(我没有测试它)支持像DOMFocusIn,DOMFocusOut这样的事件,它们是IE的focusin和focusout事件的等价物.

Answer 2

你可以用这个:

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
});

我的jsFiddle:http://jsfiddle.net/EpokK/k7RPE/3/