SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: basic questions

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    196
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    basic questions

    Is preventDefault and stopPropagation jQuery or plain js methods?

    Also, do you know of a good source that explains event bubbling/capturing?

    Thanks

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,435
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by sessions View Post
    Is preventDefault and stopPropagation jQuery or plain js methods?
    They are part of the DOM API, and so are available in plain JS within the browser (note that stopPropagation was not available in IE until version 9).
    https://developer.mozilla.org/en/docs/Web/API/Event

    Quote Originally Posted by sessions View Post
    Also, do you know of a good source that explains event bubbling/capturing?
    There's a good overview here: http://stackoverflow.com/questions/4...-and-capturing, which also provides some links to further information. Probably the most important thing to know is that event bubbling is the model that is supported by all the major browsers.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    196
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thanks!

    So from that article and others I've read today I think I understand that the w3 standard is to do both the capturing and bubbling phase? So for every event it's first handled in the outer most element in the DOM, travels down to the element clicked on, then back up to the outer most element?

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,435
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by sessions View Post
    So from that article and others I've read today I think I understand that the w3 standard is to do both the capturing and bubbling phase? So for every event it's first handled in the outer most element in the DOM, travels down to the element clicked on, then back up to the outer most element?
    Yeah, that's my understanding of it.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    196
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    cool, thanks. it's becoming clearer.

    Have you ever taken advantage of event bubbling in practice?

    Or can you describe details of how this would be advantageous in the real world?

    I read about an example of a click event being added to a table row. But the script might later insert more rows to that table and those new rows would need that same event handler. So rather than individually adding/maintaining handlers/listeners to each row, a handler was attached to the table. But I missed how this is takes advantage of event bubbling.

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,435
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Yes, I've used it in exactly the sort of scenario you've just described, with a dynamically populated list of search results. Rather than attaching a click event handler to a link on each row, I took advantage of event bubbling by attaching the handler to the list container element.

    There are two advantages to this:
    1. It performs better vs large numbers of separate handlers, and
    2. It will catch events that bubble from elements that were added to the page after you've attached the handler.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    196
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    1. It performs better vs large numbers of separate handlers, and
    2. It will catch events that bubble from elements that were added to the page after you've attached the handler.
    #2 makes sense to me.

    In what way does it perform better? the time it takes javascript to parse the DOM and attach individual handlers?

    So following your example:

    Code HTML4Strict:
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>

    I might want to react to clicking any link, but I could attach an event handler to the <ul> ?

    Then how would my code know which link was clicked?

  8. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,435
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by sessions View Post
    #2 makes sense to me.

    In what way does it perform better? the time it takes javascript to parse the DOM and attach individual handlers?
    That's right, although interestingly I was just looking up a reference for that and I came across this post which claims that although delegation is more efficient to set up, binding event handlers directly to each element is more efficient (CPU-wise) when triggering than waiting for the event to bubble up the DOM.

    Quote Originally Posted by sessions View Post
    I might want to react to clicking any link, but I could attach an event handler to the <ul> ?

    Then how would my code know which link was clicked?
    The event object has a target property which contains the element that triggered the event (see: https://developer.mozilla.org/en-US/...I/event.target).

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    196
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What's delagation? Or what 's the difference between delegation and binding?

  10. #10
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sessions View Post
    What's delagation? Or what 's the difference between delegation and binding?
    Binding is about every element having the decision power and representing itself, when it comes to events.
    Delegation defines a mandated proxy to handle the events in the name of a group of elements. It's still binding but on different, higher levels.

    Binding may take longer to set up before being ready to execute and can get difficult to manage in code. Delegation may take longer to execute but it's easier to maintain.

    Think of "binding vs. delegation" as of "event binding vs. event binding delegation based on event bubbling effect".

    If you take a needle and poke your self in the little finger with it, event bubbling will make the information in the form of pain data to travel along your arm, upper body, up to your brain.

    If you click a link which is inside a list element, the event will bubble up the li>ul>...>body>html>document>window route. This makes brain delegation possible, and it will make you slap yourself in the face for playing around with needles. In the theory anyway. In reality you could just delegate/capture the click event to the ul instead of binding click events on each li, all the while contemplating for things to do, other than torturing yourself.

  11. #11
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    196
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ok, so event binding is more of a one to one basis. I bind 1 event handler to 1 element?

    While event delegation is like 1 to many. Where say 1 event handler is bound to a ul but it's fired off from 1 or many links in <li>s?

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Yes. For meaningful interaction you have to bind/override event behavior to the elements. By default, when an event fires, (almost) nothing happens. It's just a question on where exactly to handle the events, right there or somewhere higher up the chain.

    Event delegation is like having a general for an army. Everybody is just reporting, the decision is made somewhere up the chain. Event delegation is also short for event delegation binding, since the general has to be named at same point.

    All this is because an event travels (bubbles) naturally up the parent elements until it reaches the highest level, the parent of all elements. This can be prevented though, can be stopped at the parent element of your choosing.


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
  •