原生js的事件流

原来js中的事件 ：

event.preventDefault() 阻止事件的默认行为

event.stopPropagation() 阻止事件冒泡、传播

 

事件流的定义：

浏览器对于事件触发的执行流程

 

有下面三个div，他们是嵌套关系。如果每个div都触发了点击事件，那么是从内向外触发还是从外向内触发呢？

        <div id="outer">
            <div id="middle">
                <div id="inner">

                </div>
            </div>
        </div>

默认：从内向外触发，这种从内向外触发就是冒泡

捕获：事件从外向内触发

给上述三个div添加如下的点击事件代码

        let outer = document.querySelector("#outer");
        let middle = document.querySelector("#middle");
        let inner = document.querySelector("#inner");
        outer.addEventListener('click', function(){
            console.log('outer点击事件触发了...');
        })

        middle.addEventListener('click', function(){
            console.log('middle点击事件触发了...');
        })

        inner.addEventListener('click', function(){
            console.log('inner点击事件触发了...');
        })    

发现点击事件是从里向外进行触发，先是inner、接着middle、再接着是outer，这个就是事件冒泡。

 如果此时就想触发inner的点击事件，那么就需要在inner中添加stopPropagation，如下：

        inner.addEventListener('click', function(e){
            console.log('inner点击事件触发了...');
            e.stopPropagation();//阻止事件的传播行为
        })

 如果我想将冒泡更改为捕获，将顺序更改为out、middle、inner，那么将addEventListener的第三个参数更改为true即可，