dom事件模型

先捕获，再冒泡
第三个参数为false 冒泡的时候执行
第三个参数为true 捕获的时候执行
不传则默认为false

注意点: 如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的。

dom事件模型

一直冒泡到body。。。

e.stopPropagation() : 阻止事件传递，不阻止默认行为
说明: 如果捕获阶段stopPropagation，则后续捕获冒泡都不会触发。

e.preventDefault是事件对象Event的一个方法，作用是取消一个目标元素的默认行为如链接点我，提交按钮等

e.preventDefault() : 阻止默认行为，不阻止事件传递

代码

  
  


  

    爷爷
    

      爸爸
      

        儿子
      
    
  

/*
  先捕获，再冒泡
  第三个参数为false 冒泡的时候执行
  第三个参数为true 捕获的时候执行
  不传则默认为false
  
  注意点: 如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的。
*/
document.getElementById('son')
.addEventListener('click', function() {
  console.log('son clicked');
}, false);

document.getElementById('son')
.addEventListener('click', function() {
  console.log('son clicked 2');
}, true);


document.getElementById('father')
.addEventListener('click', function() {
  console.log('father clicked');
}, true);

document.getElementById('grand')
.addEventListener('click', function() {
  console.log('grand clicked');
}, false);

document.addEventListener('click', function() {
  console.log('document clicked');
}, false);