JS学习之事件流

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

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时这个事件只在捕获阶段触发。

以下是结果：

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

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

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

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

posted @ 2016-07-18 15:48 Pickcle 阅读(177) 评论(0) 编辑收藏举报

Pickcle

JS学习之事件流

公告