SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: basic questions

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    168
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    4 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
    168
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    4 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
    168
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    4 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
    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
  •