JS事件流机制

事件流指的是

1.节点的捕获
2.处理事件
3.事件的冒泡

目前分为事件冒泡流，事件捕获流；

区别：
1.事件冒泡流在事件冒泡阶段响应事件
2.事件捕获流在捕获节点过程响应事件。
3.大部分浏览器默认的都是事件源冒泡流的方式来响应事件
使用：
addEventListener最后一个参数， 为true则代表使用事件捕获模式 ，false则表示使用事件冒泡模式。

事件冒泡流是如何绑定到对应的元素上的？又是如何做出响应？

1.从根元素html一级一级往内寻找，直到找到id="getCopy"的元素
2.为这个元素处理click事件
3.根据事件冒泡法从这个元素一级一级往外响应事件，直到根节点

var btn = document.getElementById('getCopy');
btn.addEventListener('click',  function(){
    console.log('btn click');
}, false);

事件捕获流是如何绑定到对应的元素上的？又是如何做出响应？

1.从根元素html往内寻找，寻找过程中一级一级往内响应事件，直到找到id="getCopy"的元素
2.为这个元素处理click事件
3.从这个元素开始往外一级一级的事件冒泡，直到根节点

var btn = document.getElementById('getCopy');
btn.addEventListener('click',  function(){
    console.log('btn click');
}, true);

addEventListener同一个元素绑定相同的事件和方法，后一个会覆盖前一个

var btn = document.getElementById('getCopy');
var btnFun = function(){
    console.log('btn click');
}
btn.addEventListener('click', btnFun, false);//该事件被后一个覆盖
btn.addEventListener('click', btnFun, false);//输出 btn click

addEventListener同一个元素绑定相同的事件和不同的方法，后一个不会覆盖前一个

var btn = document.getElementById('getCopy');
btn.addEventListener('click', function(){
    console.log('btn click1');//输出 btn click1
}, false);
btn.addEventListener('click', function(){
    console.log('btn click2');//输出 btn click2
}, false);

阻止事件冒泡 stopPropagation

btn.addEventListener('click', function(event){
    console.log('btn click2');//输出 btn click2
    event.stopPropagation();
}, false);