Crear un observador de evento para el enfoque?

Question

¿Es posible tener burbujas de eventos de foco en el prototipo?

Estoy tratando de evitar tener que asignar un observador en cada elemento de entrada.

<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

focus y blur events do not bubble.

Puede disparar el controlador de eventos durante la fase de captura. Al utilizar métodos DOM estándar, podría escribir

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

el valor 'verdadero' es aquí más importante.

El problema es que IE no admite la fase de captura de la propagación de eventos, pero para IE puede utilizar los eventos focusin y focusout que, a diferencia de los eventos de enfoque y desenfoque, burbujean. Recomiendo leer un article sobre este tema escrito por Peter Paul Koch. Otros navegadores (Firefox, Opera, Safari) probablemente (no lo probé) admiten eventos como DOMFocusIn, DOMFocusOut, que son equivalentes para los eventos focusin y de enfoque de IE.

Answer 2

Puede utilizar esta:

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

Mi jsFiddle: http://jsfiddle.net/EpokK/k7RPE/3/