JS addEventListener 冒泡型、捕获型事件流测试

在body中建一个p，p中建一个span：

<!doctype html>
<html>
    <head>
        <title>Practice2</title>
    </head>
<body>
    <div id = "div1">
        <p id = "p1">
            <span id = "span1">
                spanspan
            </span>
            ppp
        </p>
        divdiv
    </div>
<script type = "text/javascript">   

    document.getElementById("span1").addEventListener("click",spanClick,false);
　　document.getElementById("p1").addEventListener("click",pClick,false);
 　　document.getElementById("div1").addEventListener("click",divClick,false);
    
function divClick(){ 
console.log("you clicked div"); 
} 

function pClick(){ 
console.log("you clicked p"); 
} 

function spanClick(){ 
console.log("you clicked span"); 
} 

</script>
 </body> 
</html>
addEventListener最后一个参数决定了冒泡事件流的类型：true为捕获型、false为冒泡型
情况一：
span　　false
p　　false
div　　false

点击span输出：
span p div
点击p输出：
p div
点击div输出：
div

情况二：
span　　true
p　　true
div　　true
点击span输出：
div p span
点击p输出：
div p
点击div输出：
div
情况三：
span　　false
p　 false
div　　true
点击span输出：
div span p
点击p输出：
div p
点击div输出：
div

由此输出优先级顺序可以这样推断：
由外向内找点击的最后代元素，有进去和出来两个过程：
进去路上遇到true就输出，出去的路上遇到false就输出。
这样即可得到输出顺序

 

posted @ 2020-12-18 16:54  lucascube  阅读(185)  评论(0)    收藏  举报