See a click bubble — practice exercise

What you'll be asked to do

1. 1.See a click bubbleexercise · easy · 10 min

   Listen on the box and report when a click on the button reaches it.

   Passes when: #out should show box heard it.

2. 2.Record the bubbling orderexercise · easy · 10 min · practice plan

   Report the order the three handlers run in.

   Passes when: #out should show inner middle outer.

3. 3.Stop the bubbleexercise · easy · 10 min · practice plan

   Stop the click reaching the box and report only inner.

   Passes when: #out should show inner only.

4. 4.Listen while capturingexercise · easy · 10 min · practice plan

   Use capturing so the outer handler runs before the inner one.

   Passes when: #out should show outer first.

5. 5.Show target does not changeexercise · medium · 10 min · practice plan

   Listen on the box and report the id of target and currentTarget.

   Passes when: #out should show inner then outer.

6. 6.Fix the order recorded backwardsbug fix · easy · 8 min

   Bubbling runs the innermost handler first.

   Passes when: Clicking should make #out show inner then outer.

7. 7.Fix preventDefault used to stop bubblingbug fix · easy · 8 min · practice plan

   preventDefault cancels the browser action, not the travel.

   Passes when: Clicking should make #out show inner only.

8. 8.Fix the missing capturing flagbug fix · easy · 8 min · practice plan

   Without true the outer handler runs after the inner one.

   Passes when: Clicking should make #out show outer first.

9. 9.Fix currentTarget used as the clicked elementbug fix · easy · 8 min · practice plan

   target is where the click started, however far it travels.

   Passes when: Clicking should make #out show inner then outer.

10. 10.Fix the non-bubbling focus eventbug fix · easy · 8 min · practice plan

    focus does not bubble, so focusin is needed on the parent.

    Passes when: #out should show box heard the focus.

Between them these tasks cover Bubbling, Capturing and stopPropagation.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.