Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to catch focus events on any element in IE?

Posted on 2006-07-17
13
Medium Priority
?
405 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
ID: 17128089
How about only having onFocus on the elements you need onFocus on?
0
 
LVL 1

Author Comment

by:avernet
ID: 17128107
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 400 total points
ID: 17128135
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:avernet
ID: 17128153
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
ID: 17128276
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17128315
And this link is different from the one he already posted in what manner?
0
 

Expert Comment

by:peter_chong
ID: 17128569
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
ID: 17128715
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
ID: 17130612
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
ID: 17131145
@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
ID: 17132435
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
ID: 17132490
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
ID: 17135846
Well done!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

926 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