文章目录

1. 1. 冒泡，捕获
   1. 1.0.1. 冒泡：
   2. 1.0.2. 捕获：
   3. 1.0.3. 阻止冒泡：

冒泡，捕获

W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。
通过 ==addEventListener()== 方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

例如：

捕获：element1.addEventListener(‘click’,function(){},true)

冒泡：element2.addEventListener(‘click’,function(){},false)

传统的：element1.onclick = function(){}方法默认为冒泡阶段；）

冒泡：

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

首先从我点击的这个对象开始冒，先执行它的处理程序（函数），然后往上冒（传播），如果它的父级有和它相同的事件（动作），就执行，如果没有则一直往上冒，知道document;

main.addEventListener('click', function(){
        console.log('main');
    }, false)
    sub.addEventListener('click', function(){
        console.log('sub');
    }, false)
    intt.addEventListener('click', function(){
        console.log('intt');
    }, false)

我点击最里面的intt,然后就执行，
往上冒到sub，有相同动作，执行
往上冒到main，有相同动作，执行；

点击sub，执行
往上冒到main,有相同动作，执行；

---

捕获：

（2）捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

main.addEventListener('click', function(){
        console.log('main');
    }, true)
    sub.addEventListener('click', function(){
        console.log('sub');
    }, true)
    intt.addEventListener('click', function(){
        console.log('intt');
    }, true)

点击main,从document开始往下捕获
到main，有函数，执行，然后因为已经找到main,所以停止捕获了；

点击sub，从doument开始往下捕获
到main,有相同的动作，执行，还没找到sub,继续往下捕获
找道sub，执行函数，然后找到了就停止；

main同理；

---

阻止冒泡：

e.cancelBubble=true;
event.stopPropagation();

intt.addEventListener('click', function(e){
        var e = e;
        console.log('intt');
        e.cancelBubble = true;      
    }, false)