event bubbling and onfocus

Roy Gardiner · 03-18-2005, 04:53 PM

Code:

<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?

Code:

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

Roy Gardiner · 03-18-2005, 07:31 PM

Quote:

Originally Posted by vwphillips

not all elements can have an onfocus event?

Code:

<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

Quote:

Originally Posted by brothercake

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

aaaaaargh

Quote:

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

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

Code:

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

document[ev] = function()
{
   ... 
};

Roy Gardiner · 03-19-2005, 02:08 PM

Quote:

Originally Posted by brothercake

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

Code:

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

document[ev] = function()
{
   ... 
};

Thank you

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

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

Roy Gardiner · 03-19-2005, 07:31 PM

Quote:

Originally Posted by brothercake

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

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.