欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于js事件冒泡和事件捕获

程序员文章站 2022-07-04 22:58:07
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。 结果先输出child,再输出parent,事件的 ......

  事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。

<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%">
</div>
</div>
<script>
    document.getelementbyid('parent').addeventlistener('click',(e) =>{
        alert('parent');
    })

    document.getelementbyid('child').addeventlistener('click',(e) =>{
        alert('child');
    })
</script>

  结果先输出child,再输出parent,事件的触发顺序自内向外,这是事件冒泡。

<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%"></div></div>
 <script> document.getelementbyid('parent').addeventlistener('click',(e) =>{ alert('parent'); },true) document.getelementbyid('child').addeventlistener('click',(e) =>{ alert('child'); },true)
</script>

结果先输出parent,再输出child,事件触发顺序变更为自外向内,这是事件捕获。

还有一种写法使用settimeout实现捕获

<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%"></div></div>
    
    <script>
        document.getelementbyid('parent').addeventlistener('click',(e) =>{
            alert('parent');
        })
    
        document.getelementbyid('child').addeventlistener('click',(e) =>{
            settimeout(() => {
                alert('child');
            });
        })
    </script>

关于settimeout和setinterval的深入理解 https://www.cnblogs.com/xiaohuochai/p/5773183.html