dom event stream

The dom event stream defines that the dom structure is a tree structure. When an html element generates an event, the event will be propagated between the node and the root node of the element, and the nodes that the path passes through can trigger the event; this propagation process called dom event stream

The dom event flow is divided into three stages 

1. event capture phase

2. in the target stage

3. event bubbling phase

Event Bubbling, and Event Capture

Event bubbling from btn element to document element

 btn.addEventListener("click",function(){

 console.log("你点击了ID为btn的button元素！"); },false);

事件冒泡阻止

event.stopPropagation(); Stops only one event from bubbling by using the stopPropagation() method. 
The cancelBubble property is true. ie

jq return false 通过返回false来取消默认的行为并阻止事件起泡。

jq event.preventDefault() only cancels the default behavior by using the preventDefault() method.

Event capture from document to btn element

 btn.addEventListener("click",function(){
                console.log("你点击了ID为btn的button元素！"); },true);