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撰写的关于这个主题的article。其他浏览器（Firefox，Opera，Safari）可能（我没有测试它）支持DOMFocusIn，DOMFocusOut等事件，它们是IE焦点和焦点事件的等价物。

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/

创建焦点的事件观察者？

2 个答案: