SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    event propagation

    Hey there!

    Well i have hard time figuring out how exactly even propagation works. So i'll try to explain how i understand it, and you tell me if it's wrong or not.

    So, lets say we have this html document:
    Code:
    <body href=' '>
          <p>some text here <a href=' '>link text</a> some more text</p>
    </body>
    Now we apply CLICK event listener to BODY, P and A tags, that trigers alert for example.

    Now we click on A tag.
    So, first you go true capture phase (in FF for example), the event CLICK trevels on the DOM tree down from document to the target element. If it finds some node, that has this event, and capture is set to true, it will triger them. If they are set to false, it continues to the target, without firing them.
    Now that reaches the target, it fires the event on the target (in this case A tag), then bubbles up the tree, if we don't prevent this. So now it finds P tag, sees it has click event, and fires it. Since we didn't cancle bubbling, it will again buble upwards and find that body element has also this event, and fire that one too, and so on until it reaches the document node.

    SO is it this correct?
    And so, by using stopPropagation or set cacleBubble to true, we prevent bubbling, therefor we trigger only what target and whatever was fire during capture phase?

    Sorry for long post, but i'm figuring out this for some time, and am not sure if i got it correctly.
    So tnx for any help!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zocky View Post
    SO is it this correct?
    Yes, it seems to be an accurate description of the events. The actual event target is the Text node child of the A element, but other than that you've got it right.

    Quote Originally Posted by Zocky View Post
    And so, by using stopPropagation or set cacleBubble to true, we prevent bubbling, therefor we trigger only what target and whatever was fire during capture phase?
    If you use stopPropagation() in an event listener during the capture phase, it will stop the event from propagating to descendants. So if you have a capture listener for BODY and it calls stopPropagation(), any listeners registered for the paragraph or link will never be called. You're effectively cancelling the event before it's even reached its target. IE/JScript doesn't allow you to register event listeners for the capture phase.

    If you use stopPropagation() in the target phase or the bubble phase, it will stop the event from bubbling further up the hierarchy. In IE/JScript you need to use window.event.cancelBubble=true instead.

    To prevent the user agent's default action for a particular event, you can use preventDefault() (or window.event.returnValue=false in IE/JScript).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah i see, thank you verry much! I think i finally understand event propagation! Tnx a lot!


Bookmarks

Posting Permissions

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