Question

149

Create event observer for focus?

rated 0 times [ 152] [ 3] / answers: 1 / hits: 41935 / 15 Years ago, thu, may 21, 2009, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryankiah

Add To Favorites

Follow

Total Points: 183

Total Questions: 99

Total Answers: 112

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

answered 15 Years ago brookelynshaem · Accepted Answer

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.