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编辑  收藏  举报