DOM事件捕获与冒泡自定义事件

DOM事件小计

• 基本概念：DOM事件的级别

  DOM0: element.onclick = function(){}
DOM2: element.addEventListener('click',function(){},false)
DOM3: element.addEventListener('keyup',function(){},false)

• DOM事件模型

  • 捕获
  • 冒泡

• DOM事件流

  • 捕获 === > 目标阶段 ===> 冒泡

• 描述DOM事件捕获的具体流程

  捕获具体流程（冒泡反之）

  • window ===> document ===> html ===> body ===> …目标元素

  演示捕获流程：

  //body中新建一个id为ev的div，宽高背景自己设置下
  var ev = document.getElementById('ev')
  window.addEventListener('click',function(){
    console.log('window captrue');
  },true)//true为捕获阶段触发，false为冒泡阶段触发
  document.addEventListener('click',function(){
    console.log('document captrue');
  },true)
  document.documentElement.addEventListener('click',function(){
    console.log('html captrue');
  },true)
  document.body.addEventListener('click',function(){
    console.log('body captrue');
  },true)
  ev.addEventListener('click',function(){
    console.log('ev captrue');
  },true)
  // 点击id为ev的div，查看控制台打印如下
  window captrue
  document captrue
  html captrue
  body captrue
  ev captrue
  // 打印顺序与注册顺序无关
  

• Event对象的常见应用

  • event.preventDefault() 阻止默认事件
  • event.stopPropagation() 阻止冒泡
  • event.stopImmediatePropagation() 事件响应优先级
  • event.currentTarget 指向引起触发事件的元素
  • event.target 事件绑定的元素

• 自定义事件（模拟事件）

   var eve = new Event('custome');
   element.addEventListener('custome',function(){
    console.log('custome');
  });
   element.dispatchEvent(eve);
   // 注意是事件对象eve而不是事件名custome