Solved

How to catch focus events on any element in IE?

Posted on 2006-07-17
13
390 Views
Last Modified: 2011-10-03
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
0
Comment
Question by:avernet
  • 5
  • 5
  • 3
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
How about only having onFocus on the elements you need onFocus on?
0
 
LVL 1

Author Comment

by:avernet
Comment Utility
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 100 total points
Comment Utility
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
 
LVL 1

Author Comment

by:avernet
Comment Utility
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
 

Expert Comment

by:peter_chong
Comment Utility
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
And this link is different from the one he already posted in what manner?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Expert Comment

by:peter_chong
Comment Utility
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
 
LVL 1

Author Comment

by:avernet
Comment Utility
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
 

Expert Comment

by:peter_chong
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
@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
 
LVL 1

Author Comment

by:avernet
Comment Utility
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
 
LVL 1

Author Comment

by:avernet
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Well done!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now