event bubbling and onfocus

Roy Gardiner

03-18-2005, 04:53 PM

<HTML onClick="alert('Event is now at the HTML element.')">
<HEAD>
<TITLE>Event Bubbles</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function init() {
window.onclick = winEvent
document.onclick = docEvent
document.onfocus = focEvent
document.body.onclick = docBodEvent
}
function winEvent() {
alert("Event is now at the window object level.")
}
function docEvent() {
alert("Event is now at the document object level.")
}
function focEvent() {
alert("Focus is now at the document object level.")
}
function docBodEvent() {
alert("Event is now at the BODY element.")
}

</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Event Bubbles</H1>
<HR>
<FORM onClick="alert('Event is now at the FORM element.')">
<INPUT TYPE="button" VALUE="Button 'main1'" NAME="main1"
onClick="alert('Event started at Button: ' + this.name)"
onFocus="alert('here: ' + this.name)">
</FORM>
</BODY>
</HTML> The above taken from the Javascript Bible. Clicking on the button gives the correct set of messages about event hierachy. I have added the bits about focus and no doubt coded it wrong, because tabbing to the button to give it the focus gives me just the focus event on the button, nothing else; what have I done wrong?

Sorry if it's trivial, but my brain has stopped working.

vwphillips

03-18-2005, 06:13 PM

not all elements can have an onfocus event?

<input name="" value="focus me" onfocus="alert('Event is now at the element level.');" >

Roy Gardiner

03-18-2005, 07:31 PM

not all elements can have an onfocus event?

<input name="" value="focus me" onfocus="alert('Event is now at the element level.');" >
Hmm, don't think that's it; the onfocus works at the element level but doesn't get handed up.

Tried the code in Opera and it works the same, Firefox freezes.

brothercake

03-18-2005, 09:21 PM

onfocus should bubble, but it doesn't in IE.

IE has a proprietary pair of events - onactivate and ondeactivate - which behave just like onfocus and onblur, but they bubble. For other browsers, onfocus events should bubble fine.

Roy Gardiner

03-18-2005, 09:26 PM

onfocus should bubble, but it doesn't in IE.aaaaaargh IE has a proprietary pair of events - onactivate and ondeactivate - which behave just like onfocus and onblur, but they bubble. For other browsers, onfocus events should bubble fine. Maybe I'll try to find a compatible way of doing it.

Thank you for your help, I never suspect product bugs at my level of expertise...

brothercake

03-19-2005, 12:40 AM

Roy Gardiner

03-19-2005, 02:08 PM

If you use square-bracket notation to define an anonymous event handler, you can accomodate both with just one extra line of code:

var ev = typeof document.onactivate == 'function' ? 'onactivate' : 'onfocus';

document[ev] = function()
{
...
};
Thank you :thumbsup:

Also: how do you (if you can) determine in an onBlur handler where the focus is going to?

brothercake

03-19-2005, 07:19 PM

Roy Gardiner

03-19-2005, 07:31 PM

In addition to the target property, you also have the relatedTarget property - in a blur event the target would be the element you're leaving, and the relatedTarget the element you're going to.

The properties are - e.target and e.relatedTarget

In IE they're - event.srcElement and event.toElement Thank you once again.

It's really an RTFM problem you're answering meaning you'd be perfectly justified in not doing so, so extra :thumbsup: for that. I find all the FMs so hard to read and so difficult to navigate over any slightly abstract topic that this forum's help is a lifesaver.