创建焦点的事件观察者？

问题描述：

是否有可能在原型中有焦点事件泡泡？创建焦点的事件观察者？

我想阻止必须在每个输入元素上分配观察者。

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

答

焦点和模糊事件不泡。

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

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

'真'值在这里是最重要的。

问题是，IE不支持事件传播的捕获阶段，但对于IE，您可以使用focusin和focusout事件，这与focus和blur事件不同 - 确实会冒泡。我建议您阅读Peter Paul Koch编写的关于此主题的article。其他浏览器（Firefox，Opera，Safari）很可能（我没有测试它）支持像DOMFocusIn，DOMFocusOut等IE对焦和聚焦事件的等效事件。

如果（_is_ie）{ \t // IE只有着眼/模糊的事件监听器 \t f.observe（ '的focusIn'，这.onFocus.bind（本））; \t f.observe（'focusout'，this.onBlur.bind（this））; }否则{ \t // Firefox和Safari的焦点/模糊事件侦听器\t \t \t \t f.addEventListener（ '焦点'，this.onFocus.bind（本），TRUE）; \t f.addEventListener（'blur'，this.onBlur.bind（this），true）; } 然后在onBlur和onFocus中，我得到元素（Event.element）并检查它的nodeName，看看我是否应该做任何事情。 – 2009-05-21 16:42:39

答

您可以使用此：

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/

创建焦点的事件观察者？

相关推荐