JS學習之事件流

時間 2020-06-29

原文原文鏈接

本文是原創文章，如需轉載，請註明文章出處javascript

JS和AS師出同源，因此事件流的3個階段也跟AS同樣，分別是捕獲階段，目標階段，冒泡階段。html

下面寫了個例子能夠清晰的看出事件流的順序：java

eventTest.htmlspa

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="eventTest.js"></script>
</head>
<body>
    <div id="div" style="position:relative;width:100%;height:200px;background: #00ff00">
        <button id="btn" style="position:absolute;display:block;left:50%;top:50%;margin-left:-26px;margin-top:-10px">button</button>
    </div>
</body>
</html>

eventTest.jscode

window.onload = function()
{
    init();
}

function init(){
    var div = document.getElementById("div");
    div.addEventListener("click", onDivCaptureHandler, true);
    div.addEventListener("click", onDivBubbleHandler, false);

    var com = document.getElementById("btn");
    com.addEventListener("click", onBtnCaptureHandler, true);
    com.addEventListener("click", onBtnBubbleHandler, false);
}

function onDivCaptureHandler(event){
    console.log("div capture----eventPhase:" + event.eventPhase);
}

function onDivBubbleHandler(event){
    console.log("div Bubble-----eventPhase:" + event.eventPhase);
}

function onBtnCaptureHandler(event){
    console.log("btn capture-----eventPhase:" + event.eventPhase);
}

function onBtnBubbleHandler(event){
    console.log("btn bubble-----eventPhase:" + event.eventPhase);
}