JS事件流

什么是事件流？

DOM事件流包括三个阶段：事件捕获阶段，处于目标阶段与事件冒泡阶段 三个阶段。

由外至内层会经历捕获阶段，目标阶段，冒泡阶段三个阶段，相应地会触发路径元素上的事件。

事件冒泡

事件冒泡既有好处，也有坏处。如果不使用事件冒泡可以通过event.preventDefault()阻止。 利用事件冒泡可以做事件委托。

事件委托的作用

给父元素设置监听事件，点击子元素通过事件冒泡的方式触发父元素上的监听事件。

事件委托的应用

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
//事件委托的原理：给父元素添加监听器，利用事件冒泡影响每一个子元素。
 var ul  =document.querySelector('ul');
ul.addEventListener('click',function (e) {
    e.target.style.backgroundColor ='pink'
})

事件捕获和事件冒泡机制

事件捕获

当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件

事件冒泡

当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件

用addEventListener(type,listener,useCapture)实现

1.type: 必须,String类型,事件类型
2.listener: 必须,函数体或者JS方法
3.useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段

    <div class="classv">
        我是祖宗
        <div class="actva">我是老爸
            <div class="foo">我是孩子</div>
        </div>
    </div>
    <script type="text/javascript">
        var a = document.querySelector('.classv').addEventListener('click', function() {
            console.log('我是祖宗')
        }, false)
        var b = document.querySelector('.actva').addEventListener('click', function() {
            console.log('我是老爸')
        }, false)
        var c = document.querySelector('.foo').addEventListener('click', function() {
            console.log('我是孩子')
        }, false)
    </script>

addEventListener默认是事件冒泡，

当点击我是老爸 打印内容： 我是老爸 》  我是祖宗 
当点击我是老孩子 打印内容： 我是孩子 》  我是老爸 》 我是祖宗

当把我是祖宗addEventListener改为true，点击我是老爸
打印内容：我是祖宗 》 我是老爸