为聚焦创建事件观察器？

Question

在Prototype中，焦点事件能否冒泡?

我正在尝试避免在每个输入元素上分别分配观察者。

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

- Louis W

Answer 1

聚焦和失焦事件不会冒泡。

你可以在捕获阶段触发事件处理程序。使用标准的DOM方法时，你需要编写：

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

'true'值在这里最重要。

问题在于IE不支持事件传播的捕获阶段，但是对于IE，您可以使用focusin和focusout事件，它们（与focus和blur事件不同）会冒泡。我建议阅读Peter Paul Koch撰写的这个主题的文章。其他浏览器（Firefox，Opera，Safari）可能（我没有测试）支持类似DOMFocusIn，DOMFocusOut的事件，这些事件是IE的focusin和focusout事件的等价物。

- Rafael

---

如果 (_is_ie) { // 仅限 IE 的 focus/blur 事件监听器 f.observe('focusin', this.onFocus.bind(this)); f.observe('focusout', this.onBlur.bind(this)); } else { // Firefox 和 Safari 的 focus/blur 事件监听器
f.addEventListener('focus', this.onFocus.bind(this), true); f.addEventListener('blur', this.onBlur.bind(this), true); }然后在 onBlur 和 onFocus 中，我获取元素（Event.element）并检查它的 nodeName 是否需要执行任何操作。 - Louis W

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/

- EpokK