DOM事件类

DOM事件类

问题（从上之下，逐步深入）：

• 基本概念：DOM事件的级别
• DOM事件模型
• DOM事件流
• 描述DOM事件捕获的具体流程
• Event对象的常见应用
• 自定义事件

---

1. 基本概念–DOM事件的级别

DOM事件类	事件级别
DOM0	element.onclick = function() {}
DOM2	element.addEventListener(‘click’, function() {}, false)
DOM3	element.addEventListener(‘keyup’, function() {}, false)

DOM3 中增加了许多事件，如keyup , keydown, keypress….

1. DOM事件模型
   捕获机制与冒泡机制

2. DOM事件流
   一个完整的事件流分三个阶段：

   • 第一阶段：捕获
   • 第二阶段：目标阶段
   • 第三阶段：冒泡

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

   • 捕获的具体流程：window -> document -> html -> body -> …. -> 目标元素
   • 冒泡的具体流程：目标元素 -> … -> body -> html -> document -> window

4. Event对象的常见应用

   event.preventDefault();
   event.stopPropagation();
   event.stopImmediatePropagation(); // 当在一个DOM对象上绑定了A,B两个事件时，你希望点击它时，
                               // 执行A，不执行B；则在A中添加这个代码
   event.currentTarget(); // 当前绑定事件的对象
   event.target();

5. 自定义事件

var eve = new Event('hello');
dom.addEventListener('hello', function(){
    console.log('Hello, world');
})
dom.dispatchEvent(eve);