js 事件流理解 && 阻止事件冒泡和默认行为

 

 

第一：事件流：在页面接受事件的顺序。分两个阶段 1事件捕获阶段 2目标阶段 3事件冒泡阶段

    1事件捕获阶段：是从上而下查找如 document->html->body->div

    2目标阶段

    3事件冒泡阶段：是从下而上找（与上相反）

  addEventListenter有三个参数（事件，回调函数，boolean[false:冒泡--默认，true:捕获]）

  <div class="parent">

    父元素

    <div class="child">

      子元素

    </div>

  </div>

  事件捕获情况：

  点击子元素div情况下：

  let child = document.querySelector('.child')

  child.addEventListener('click',function(){

    alert('我是子元素')

  },true)//true捕获 从上而下 事件先打印父元素在打印子元素。

  let parent = document.querySelector('.parent')

  parent.addEventListener('click',function(){

    alert('我是父元素')

  },true)

  事件冒泡情况

  点击子元素div情况下：

   let child = document.querySelector('.child')

  child.addEventListener('click',function(){

    alert('我是子元素')

  },false)//false捕获 从下而上 事件都先打印子元素在打印父元素。

  let parent = document.querySelector('.parent')

  parent.addEventListener('click',function(){

    alert('我是父元素')

  },false)

第二：阻止事件冒泡和默认行为

div class="parent">

    父元素

    <div class="child">

      子元素

    </div>

  </div>

  1 阻止默认行为如下：

  <a href="www.jd.com" > 阻止a标签跳转到www.jd.com </a>

  var aa = document.querySelector('a')

  aa.addEventListener('click',function(e){

    //1 种

    e.preventDefault();

    //2 种 兼容性问题 老版本ie

   // e.returnValue = false;

    //3 种

    //return false;

  })

  2 阻止事件冒泡

    let child = document.querySelector('.child')

    child.addEventListener('click',function(e){

      alert('我是子元素')

      e.stopPropagation() //主要这句话

      //e.cancelBubble = true //兼容性老版本ie 取消冒泡

    },false)//冒泡行为默认是false 可以不写 false

  let parent = document.querySelector('.parent')

  parent.addEventListener('click',function(){

    alert('我是父元素')

  },false)