Javascript——冒泡排序和阻止事件冒泡

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener(type,listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

DOM事件流三个阶段

1. JS代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick和attachEvent(ie)只能得到冒泡阶段
3. 捕获阶段，如果addEventListener第三个参数是true，那么处于捕获阶段：document->html->body->father->son

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
     
            alert('son');
        },true);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
     
            alert('father');
        },true);
</script>

4. 冒泡阶段：如果addEventListener第三个参数是false或省略，则处于冒泡阶段：son->father->body->html->document

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
     
            alert('son');
        },false);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
     
            alert('father');
        },false);
        document.addEventListener('click',function(){
     
			alert('document');
		})
</script>

有些事件是没有冒泡的，比如onblur, onfocus, onmouseenter, onmouseleave

阻止事件冒泡的两种方式：
事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点
事件冒泡本身的特性会带来坏处，也会带来好处。

<script>
    if(e&&e.stopPropagation){
     
        e.stopPropagation();
    }else{
     
        window.event.cancelBubble=true;
    }
</script>

事件委托（代理/委派）：在jQuery里称为事件委派。
原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点。不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul，ul有注册事件，就会触发事件监听器。

作用：只需要操作一次DOM，提高了程序的性能。

<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e){
     
        e.target.style.backgroundColor = 'pink';
    })
</script>