I know there are two phases of event propagation, capturing and bubbling. When one element is clicked, the event first propagates from outer element to the clicked element and this phase is called as capturing. Then the event propagates from the clicked element to the outer element and this phase is called bubbling. I want to know what the purpose is for the design of capturing and bubbling and is it enough for browser only supports capturing or bubbling.
Asked
Active
Viewed 129 times
0
-
The flexibility is useful for developers – CertainPerformance Mar 30 '20 at 08:29
-
If it doesn't support both, it's not a (standard-compliant) browser :-) – Bergi Apr 01 '20 at 18:48
-
Downvote for lack of research effort. What resources did you read about dom event flow, and did they not give any examples of handling events in both of the two phases? – Bergi Apr 01 '20 at 18:50
-
Modern browser support both of capturing and bubbling. There is a link which explains capturing and bubbling, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture. – Apr 02 '20 at 02:05
-
*In modern browsers, by default, all event handlers are registered for the bubbling phase.* But you can use the following method to make the handler be registered for the capturing phase. ``element.addEventListener('click', handler, true)`` The third parameter means should the handler executes in the capturing phase. – Apr 02 '20 at 02:20
-
There is demo about how to execute event handler in different phase. https://codepen.io/imechzhangly/pen/GRJLNjw – Apr 02 '20 at 03:47
-
1This answer has a bit of historical context: https://stackoverflow.com/a/4616720/8338 In short, the capturing model came from Netscape, and the bubbling model from Internet Explorer. Then both were standardized. There's no deeper meaning to having two instead of one. – Alexey Lebedev Apr 02 '20 at 17:29