How to catch focus events on any element in IE?

With Firefox, I can do:
document.addEventListener("focus", gotEvent, false)

Then any focus event on any element on the page will eventually bubble up and my listener 'gotEvent' will be called.

I could register the same listener in IE with:
document.attachEvent("onfocus", gotEvent)

However this listener it never called. My understanding is that it is never called because the focus event does not bubble on IE (see reference to MSDN documentation below). But then, is there a way to catch all the focus events on any elements on my page by registering just one listener in IE?

http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onfocus.asp

The profound reason why I want to do this is that I have pretty large pages. So large, that it takes too much time to register my event on all the elements when the page loads. Hence the idea of registering the event handler only once, and figuring out in the event handler code what the target of the event was.

Any suggestion is welcome.

Alex
LVL 1
avernetAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Can't you register them inline - I know that makes very verbose html but if it is so slow?

I had a look.

Perhaps this page and the links on it can help:
http://www.quirksmode.org/js/events_properties.html
0
 
Michel PlungjanIT ExpertCommented:
How about only having onFocus on the elements you need onFocus on?
0
 
avernetAuthor Commented:
mplungjan: That's the point of my question. There are thousands of elements I would have to register the event handler on. This is what I do now, but registering my event handler on such a large number of elements is quite slow.

Alex
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
avernetAuthor Commented:
mplungjan:

I would like to avoid adding the event handlers to the JavaScript code as this will increase the amount of HTML that gets sent to the client, making the page even larger and longer to download. But yes, if nothing else works, this on my list of possible solutions.

Alex
0
 
peter_chongCommented:
0
 
Michel PlungjanIT ExpertCommented:
And this link is different from the one he already posted in what manner?
0
 
peter_chongCommented:
Dear all,
What I tried to said is:
We can use anonymous event handler to catch focus events on all elements in
IE.

For example:
var theEvent = typeof document.onactivate == 'function' ? 'onactivate' : 'onfocus';

document[theEvent] = function()
{
/*Changes applied to all elements*/
...
};

Perhaps it has clear out the puzzles.

Rgds,
Peter
0
 
avernetAuthor Commented:
Peter,

I tried to register an event handler with document.onfocus = function(event) { ... }, but it does not get called on IE when I set the focus to, say, a text field in the page.

This however works fine with Firefox. From what I understand, this is because the 'focus' event does not bubble on IE, per the reference I was linking to my original message:

http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onfocus.asp

Alex
0
 
peter_chongCommented:
Dear Friends,
I have work out an example of how it work in IE 6.
<html>
<head>
<style type="text/css">
input { background: #ffc; color blue;}
input:hover { background: #ddd; color: maroon;}
input:focus { background: yellow; border: 3px solid red; color: red; }
</style>
<SCRIPT LANGUAGE="JavaScript">
function initForms(){
       var el;      
            
        for(i = 0; i < document.forms.length; i++){
                for(j = 0; j < document.forms[i].elements.length; j++){
                        el = document.forms[i].elements[j];
                 
                        el.onfocus = fldBGChange; /*Is a reference, therefore no blacket*/
                        el.onBlur  = fldBGChange; /*Event handler are case sensitive*/
                }
        }
            


}


function fldBGChange(){
        bgClr = this.style.backgroundColor;
     
       if(bgClr == '' || bgClr == null){       
     
                this.style.backgroundColor = 'yellow';
        } else {
             
                this.style.backgroundColor = 'white';
        }


}
</Script>

</head>
<body onLoad="initForms();">
<form>
<table>
<tr><td><INPUT TYPE="text" NAME="main1"></td></tr>
<tr><td><INPUT TYPE="text"  NAME="main2"></td></tr>
<tr><td><INPUT TYPE="text"  NAME="main3"></td></tr>
</table>
</form>
</body>
</html>
Hope it helps.
Regards,
Peter
0
 
Michel PlungjanIT ExpertCommented:
@Peter Please take time to read the question more carefully
1. the link you mentioned was the same as he already had
2. "So large, that it takes too much time to register my event on all the elements when the page loads."

means he has tried to do what you suggests but it takes too long!!!
0
 
avernetAuthor Commented:
I found a solution using IE DHTML behaviors:

In the HTML file, add:

<style type="text/css">
    * { behavior: url(events.htc); }
</style>

events.htc looks like:

<PUBLIC:ATTACH EVENT="onfocus" ONEVENT="ieFocus()" />

<SCRIPT LANGUAGE="JScript">

function ieFocus() {
    var target = window.event.srcElement;
    window.myFocus.call(target, window.event);
}

</SCRIPT>
 
This way the function ieFocus() is called every time there is a focus event on any element.


And for Firefox, we can to capture the event by using 'true' as the third parameter to addEventListener(). Contrast this with registering a listener which is called when the event bubbles.

window.addEventListener("focus", mozFocus, true);

Alex
0
 
avernetAuthor Commented:
mplungjan,

I asked the points to be assigned to you for your comment earlier (Date: 07/17/2006 11:54PM PDT), but in addition to also to mark my last comment as a alternate answer.

Asked on:
http://www.experts-exchange.com/Community_Support/Q_21923480.html

Thank you all,

Alex
0
 
Michel PlungjanIT ExpertCommented:
Well done!
0
All Courses

From novice to tech pro — start learning today.