1. The so-called event bubbling means that when the event starts to execute, it is received by the node with the deepest nesting level in the document, and then propagated up to the father of the deepest node of the nesting level> father's father>... all the way to the outermost level.
Concrete demonstration
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="myLip">click</div>
</body>
</html>
当点击页面中的div元素,这个click事件会按照一个顺序来传播即:
1.<div>
2.<body>
3.<html>
4.document
It simply is, the click click event to be executed on the first div element, then click the event will propagate up the DOM, in the process, the click event node will occur at every level, knowing that spread to document object.
The click The process of event propagating upwards level by level and at the same time at each higher node is event bubbling.
2. Event capture is just the opposite of event bubbling. The node with a relatively low nesting level should receive the event first, that is, capture the event before it reaches the registered element. Then the sequence is:
1.document
2.<html>
3.<body>
4.<div>
In the process of event capture, the document object first receives the click event, and then follows the order of the DOM tree, until the event is propagated to the element that actually registered the click event, which is the div element.