事件传播机制、阻止传播、取消默认事件、事件代理

1、事件传播机制

事件流描述的是从页面中接收事件的顺序，比如有一个嵌套的div，我们点击了内层div,这时这个click事件是内层先触发还是外层先触发呢，目前事件的传播机制主要有三种：
1、冒泡事件：事件开始时，是由目标元素最先触发，然后逐级像上传播，直到根节点
2、捕获事件：捕获事件和冒泡事件相反，由根节点先触发事件，然后逐级向内传播，直到目标元素
3、DOM事件：DOM2事件规定事件流分为三个阶段：首先为捕获阶段，为截取事件提供机会。然后是实际目标接受阶段，最后是冒泡阶段

举个栗子：操作一下可以更直观的理解


 
        container
        
          box
          target

冒泡事件：

function $(selector){
     return document.querySelector(selector)
}

 $(".container").addEventListener('click', function(e){
            console.log('container....冒泡阶段')
        },false)

        $('.box').addEventListener('click',function(e){
            console.log('box....冒泡阶段')
        },false)

        $('.target').addEventListener('click',function(e){
            console.log('target....冒泡阶段')
        },false)

冒泡阶段.jpg

— 通过例子可以看出冒泡阶段是由内部目标元素先触发事件，然后逐级像外传播的，直到根元素

捕获事件：

$(".container").addEventListener('click', function(e){
            console.log('container....捕获阶段')
        },true)

        $('.box').addEventListener('click',function(e){
            console.log('box....捕获阶段')
        },true)

        $('.target').addEventListener('click',function(e){
            console.log('target....捕获阶段')
        },true)

捕获阶段.jpg

— 捕获阶段是外部根元素先触发事件，然后像内逐级传播，最后到达目标元素

2、阻止传播

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
1、addEventListener
2、removeEventListener

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1、事件类型
2、事件处理方法
3、布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

3、取消默认事件

冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

阻止事件冒泡与捕获：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。stopPropagation作为事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

var handler = function (e) {
    alert(e.type);
    e.stopPropagation();
}

addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);

若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播

取消默认事件的方法：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false；
要阻止事件的默认行为，可以使用preventDefault()方法，比如我们可以阻止链接导航这一默认行为

document.querySelector('#btn').onclick = function (e) {
    e.preventDefault();
}

4、事件代理

事件代理又称为“事件委托”。意思是把原本需要绑定在子元素上的事件委托给父元素，让父元素负责监听的职务，委托代理的原理是DOM元素的事件冒泡。

假如有这样一个HTML片段

    
       box1
       box2
       box3

点击每个class为box的元素，都会在控制台打印出他们的内容。
点击id为add的按钮，可以增加一个class=box的div元素。同样点击他们可以打印出他们的内容
我们常常会这样写

       function $(selector){
            return document.querySelector(selector)
        }
        function $$(selector){
            return document.querySelectorAll(selector)
        }

        $$('.box').forEach(function(val){
            val.addEventListener('click',function(){
                console.log(this.innerText)
            })
        })

        var i= 4
        $('#add').onclick=function(){
            var box=document.createElement('div')
            box.innerText='box' + (i++)
            box.classList.add('box')
            $('.container').appendChild(box)
        }

打印结果：

例图.jpg

会发现只有box1,box2,box3可以在控制台打印出来，新建的box4，box5却不行。因为最开始页面上只有3个class为box的元素，所以js只为这三个元素绑定了click事件，后面我们add新的div需要重新添加click事件才会有效果，这就很头疼了。这个时候我们就需要事件委托了：

        function $(selector){
            return document.querySelector(selector)
        }
        function $$(selector){
            return document.querySelectorAll(selector)
        }

        var i= 4
        $('#add').onclick=function(){
            var box=document.createElement('div')
            box.innerText='box' + (i++)
            box.classList.add('box')
            $('.container').appendChild(box)
        }

        $('.container').onclick=function(e){
            if(e.target.classList.contains('box')){
                console.log(e.target.innerText)
            }
        }