javascript事件流

作者: ITtian | 来源:发表于2017-08-30 16:20 被阅读18次

JavaScript事件捕获冒泡与捕获
JavaScript事件（一）
JS的原生事件
javascript事件流
JavaScript事件流
javascript事件流
【javascript】事件流
JavaScript事件流
JavaScript事件流
事件

听过冒泡吗，听过捕获吗，是否会觉得很熟悉，但是让你具体的回答，却又说不上什么所以然。

w3c约定的事件触发分为三个阶段，顺序为捕获阶段，目标阶段，冒泡阶段

捕获阶段时，先触发最上层父元素的捕获阶段绑定函数，即从外层到里层先触发，直至到达目标元素,进入目标阶段

目标阶段时，按照绑定顺序触发目标元素的绑定函数，结束后，进入冒泡阶段

冒泡阶段时，触发上一级父元素的冒泡阶段绑定函数，即从里层到外层触发，

target.addEventListener(name,handle,useCapture)
userCapture为true时，表示在捕获阶段触发
userCapture为false时，表示在冒泡阶段触发

event.stopPropagation() 
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点

实例：

// html 片段
<div id="div1" style="background: blue;width: 100px; height: 100px;">
        <div id="div2" style="background: red;width: 70px; height: 70px;">
            <div id="div3" style="background: yellow;width: 50px; height: 50px;"></div>
        </div>
</div>

// js 代码
var oDvi1 = document.getElementById('div1'),
    oDvi2 = document.getElementById('div2'),
    oDvi3 = document.getElementById('div3');

oDvi1.addEventListener('click', handle1, true);
oDvi2.addEventListener('click', handle2, false);
oDvi3.addEventListener('click', handle3, true);


function handle1(){ //蓝
    alert(123);
}

function handle2(){ //红
    alert(345);
}

function handle3(){//黄
    alert(456);
}

点击div3,结果为123，456，345，总结：
捕获阶段：外=》里，在div1出检测useCapture 是否为true,是则触发函数，div2同理，
目标阶段：发现div3就是鼠标点击的阶段，所以进入目标阶段，对于目标元素的所有回调，按照绑定顺序执行。执行完毕，进入冒泡阶段
冒泡阶段：里=》外，在div2出检测useCapture是否为false,是则执行，div1同理

或许下面这个例子更能说明这一点:

<!DOCTYPE HTML>
<html>
  <head></head>

  <body>
    <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
      <div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:green; z-index:1">
        <div id="id3" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:2">

        </div>
      </div>
    </div>
  </body>
  <script>
  console.log('点击id3')
  document.getElementById('id1').addEventListener('click', function() { console.log('id1 maopao');}, false);
  document.getElementById('id1').addEventListener('click', function() { console.log('id1 capuse');}, true);
  document.getElementById('id2').addEventListener('click', function() { console.log('id2 maopao');}, false);
  document.getElementById('id2').addEventListener('click', function() { console.log('id2 capuse');}, true);
  document.getElementById('id3').addEventListener('click', function() { console.log('id3 maopao');}, false);
  document.getElementById('id3').addEventListener('click', function() { console.log('id3 capuse');}, true);
  </script>
</html>

运行结果如图：

运行结果.png