JavaScript稳稳稳扎记——dom 事件流 三个阶段

dom 事件流 三个阶段

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
捕获和冒泡阶段

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
3. 捕获阶段 addEventListener（type，listener【，useCapture】） 第三个参数如果是true ，表示再事件捕获阶段用时间处理程序，如果是false或不写，表示在时间冒泡阶段调用事件处理程序 document -> html -> body -> father -> son

  <div class="father"> 
  <div class="son">son盒子</div>
  </div>
  <script>
 var son = document.querySelector('.son');
    son.addEventListener('click', function() {
     alert('son');
  var father = document.querySelector('.father');
     father.addEventListener('click', function() {
       alert('father');
    }, true);
     var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
</script>
 - 
         冒泡阶段 如果addEventListener 
         第三个参数是 false 或者 省略 
         那么则处于冒泡阶段  son -> father ->body -> html -> document
       

• 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。 有些事件是没有冒泡的比如 onblur onfoces onmouseenter,onmouseleave
• 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某事