DOM事件

面试复习之DOM事件

Posted by BY on August 17, 2019

DOM事件类

  • 基本概念: DOM事件的类别
  • DOM事件模型(捕获和冒泡)
  • DOM事件流
  • 描述DOM事件捕获的具体流程
  • Event对象的常见应用
  • 自定义事件

dom事件类

  • DOM0 element.onclick=function(){}
  • DOM2 element.addEventListener(‘click’, function(){}, false)
  • DOM3 element.addEventListener(‘keyup’, function(){}, false)

事件模型

  • 捕获
  • 冒泡

事件流

  1. 捕获
  2. 目标阶段
  3. 冒泡

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

  1. window
  2. document
  3. html(如何获取:document.documentElement)
  4. body
  5. … // 父级 -> 子级

Event对象

  • event.preventDefault(); //阻止默认事件
  • event.stopPropgation(); //阻止冒泡
  • event.stopImmediatePropagation();
    • 按钮上注册了两个click事件,阻止另一个click事件执行
  • event.currentTarget() // 当前所绑定的事件
  • event.target //当前被点击的元素

自定义事件(模拟事件)

var e = new Event('testEvent');
//CustomEvent可以指定自定义参数
ev.addEventListener('testEvent', function(){
    console.log('testEvent');
})
ev.dispatchEvent(eve)