Create event observer for focus?

Question

Is it possible to have focus events bubble in protoype?

I am trying to prevent having to assign an observer on every input element.

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

Solution 1

focus and blur events don't bubble.

You can fire event-handler during capturing phase. When using standard DOM methods, you would write

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

the 'true' value is here most important.

The problem is that IE doesn't support capturing phase of event propagation, but for IE you can use focusin and focusout events, which - unlike focus and blur events - do bubble. I recommend reading an article on this topic written by Peter Paul Koch. Other browsers (Firefox, Opera, Safari) probably (I didn't test it) support events like DOMFocusIn, DOMFocusOut which are equivalents for IE's focusin and focusout events.

Solution 2

You can use this :

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

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