Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2004
    Location
    London, England
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts

    event bubbling and onfocus

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    not all elements can have an onfocus event?

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

  • #3
    New Coder
    Join Date
    Jan 2004
    Location
    London, England
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    New Coder
    Join Date
    Jan 2004
    Location
    London, England
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    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...

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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()
    {
       ... 
    };
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    New Coder
    Join Date
    Jan 2004
    Location
    London, England
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    New Coder
    Join Date
    Jan 2004
    Location
    London, England
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •