事件流，事件冒泡

事件流（事件传播）

描述页面接收事件的顺序

事件发生时，会在元素节点之间传播的顺序

事件捕获：事件发生时，从最不具体的元素，依次向下传播到最具体的元素（外--> 内）

事件冒泡：事件发生时，从最具体的元素，依次向上传播到最具不具体的元素（内-->外）

w3c规定：事件传播有三个阶段

1.捕获阶段

2.目标阶段（具体点击的是谁 ev.target）

3.冒泡阶段

DOM2级可以支持捕获

事件源.addEventListener（'事件类型'，'事件处理函数',布尔true事件捕获、false事件冒泡，不写为默认冒泡）

DOM0级不支持捕获写法

阻止事件冒泡：

如果子元素父元素都设置了事件（不仅仅为点击事件），根据冒泡会先执行子元素，在执行父元素，引起了没必要的事件。

1.ev.stopPropagation()阻止事件冒泡标准写法

2.ev.cancelBubble = true 阻止事件冒泡 IE支持的写法（仅作了解）

阻止事件的默认行为：

比如：a标签的跳转功能，点击之后进行跳转，若是想要不进行跳转则需使用阻止事件的默认行为。 需要写进函数里。

1.ev.preventDefault（）；

2.return false；（只支持DOM0级）

3.ev.returnValue = false （IE支持的方式，仅作了解）

this和target的区别

this指的是绑定事件的事件源

target指的是想获取点击的具体是谁

事件委托

事件委托指的是可以把绑定事件委托给父元素进行处理，利用的是冒泡原理

好处为：资源消耗少，降低内存占用

新增元素也会获取到 父元素的事件

 var oUl = document.querySelector('ul')
​
    oUl.onclick = function(e){
        var ev = e || window.event;
        // 通过ev.target来获取点击的具体元素
        // 点击元素是li的时候，执行获取内容
        if (ev.target.nodeName == 'LI') {
            console.log(ev.target.innerHTML);
        }
    }

​
​
​
案例2：

oBtn.onclick = function(){
        var oLi = document.createElement('li');
        oLi.innerHTML = '6'
        oUl.appendChild(oLi)
    }
    // 事件委托的方式来添加点击事件，发现新增元素也自动的获取到了父元素绑定的事件
    oUl.onclick = function(e){
     var ev = e || window.event;
     ev.target.style.background = 'yellow'
    }