Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Event bubbling and capturing in javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 455
    Comment on it

    There are two ways of event propagation in HTML DOM, when an event occur in an element with an element:
    1. Event bubbling
    2. Event capturing

    1. Event bubbling : There are many times when we want to handle two or more event handlers at different levels in DOM and that is why event bubbling introduced.
    So, it makes an event to propagate from child element to a parent element.

    
                   / \
    ===============| |=================
    | 1st element  | |                |
    |   ===========| |===========     |
    |   |2 element | |          |     |
    |   =========================     |
    |        Event BUBBLING           |
    ===================================

    The event handler of 2nd element fires first, the event handler of 1st element fires last.

    2. Event propagation : It is as same as event bubbling. Also it not only include event bubbling but also the event capturing.

    3. Event capturing : Event capturing is the opposite of bubbling (events are handled at higher levels first, then sink down to individual elements at lower levels). Many browser does not support Event capturing like Internet Explorer version previous to 9.0.

    
                   | |
    ===============| |=================
    | 1st element  | |                |
    |   ===========| |===========     |
    |   |2 element \ /          |     |
    |   =========================     |
    |        Event CAPTURING          |
    ===================================
    

    The event handler of 1st element fires first, the event handler of 2nd element fires last.

    Hope this will make you understand more about Event capturing and Event bubbling.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: