JS学习之事件流

时间：2023-12-26 12:57:01

本文是原创文章，如需转载，请注明文章出处

JS和AS师出同源，所以事件流的3个阶段也跟AS一样，分别是捕获阶段，目标阶段，冒泡阶段。

下面写了个例子可以清晰的看出事件流的顺序：

eventTest.html

<!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.js

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);

}

这个例子很简单，先添加一个绿色的div，其中有个居中的按钮，JS代码中分别给div和按钮添加点击事件的监听器，需要注意的是，addEventListener的第三个参数，为true时这个事件只在捕获阶段触发。

以下是结果：

JS学习之事件流

点击按钮之后，控制台输出：

div capture----eventPhase:1
btn capture-----eventPhase:2
btn bubble-----eventPhase:2
div Bubble-----eventPhase:3

由此可以清晰的看出，捕获阶段是从最上层的元素逐层向下直到最具体的点击对象，而冒泡阶段是从最具体的点击对象逐层向上直到最上层。

另外，需要注意的是，addEventListener的第三个参数无论是true还是false，当具体对象的监听器触发时，事件阶段都是2，也就是目标阶段。

相关文章