Here we clearly see the capture propagation followed by the bubble propagation. Note
that on the element on which the event was actually raised, handlers will be called in
the order they were added, whether they were capture or propagation events (if we
reversed the order in which we added the capture and bubble event handlers, we
would see the bubble called before the capture).
Now let’s see what happens if we cancel propagation. Modify the example to cancel
propagation on the
<div>
capture:
addEventLogger
(
body
,
'capture'
);
addEventLogger
(
body
,
'bubble'
);
addEventLogger
(
div
,
'capture'
,
'cancel'
);
addEventLogger
(
div
,
'bubble'
);
addEventLogger
(
button
,
'capture'
);
addEventLogger
(
button
,
'bubble'
);
We now see that the propagation continues, but the event is marked as canceled:
capture: BODY
capture: DIV (canceled)
capture: BUTTON (canceled)
bubble: BUTTON (canceled)
bubble: DIV (canceled)
bubble: BODY (canceled)
Now stop the propagation at the
<button>
capture:
addEventLogger
(
body
,
'capture'
);
addEventLogger
(
body
,
'bubble'
);
addEventLogger
(
div
,
'capture'
,
'cancel'
);
addEventLogger
(
div
,
'bubble'
);
addEventLogger
(
button
,
'capture'
,
'stop'
);
addEventLogger
(
button
,
'bubble'
);
We see that propagation stops after the
<button>
element. The
<button>
bubble
event still fires, even though the capture fired first and stopped the propagation. The
<div>
and
<body>
elements do not receive their bubbled events, however:
capture: BODY
capture: DIV (canceled)
capture: BUTTON (canceled)
bubble: BUTTON (canceled)
Lastly, we stop immediately on the
<button>
capture:
addEventLogger
(
body
,
'capture'
);
addEventLogger
(
body
,
'bubble'
);
addEventLogger
(
div
,
'capture'
,
'cancel'
);
addEventLogger
(
div
,
'bubble'
);
addEventLogger
(
button
,
'capture'
,
'stop!'
);
addEventLogger
(
button
,
'bubble'
);
Events | 269
