前端知识点之DOM 事件类

知识点：
--DOM 事件的级别
--DOM 事件模型和事件流
--Event 对象的常见应用
--自定义事件

DOM 事件基本概念

一、DOM 事件的级别

DOM 0：
element.onclick = function () {}

DOM 2：
element.addEventListener('click',function (){},false)
true: 捕获
false：冒泡,默认值

DOM 3：
element.addEventListener('keyup',function (){},false)
DOM 3标准时代主要新增了键盘等物理事件

二、DOM 事件模型和事件流

捕获：从上而下，window => document => html => body => .... => 目标元素
冒泡： 从下而上，目标元素 => ... => body => html => document => window
事件流：： 捕获阶段-目标阶段-冒泡阶段

捕获的具体流程：window => document => html => body => .... => 目标元素

    目标元素


// 输出顺序 window document html body div span

冒泡的具体流程：目标元素 => ... => body => html => document => window

    目标元素


// 输出顺序 span div body html document window

三、Event 对象的常见应用

1. event.preventDefault(): 阻止默认事件，比如：

跳转成功
跳转失败

2. event.stopPropagation(): 阻止冒泡行为：

点击

// 只输出 span，阻止了冒泡，所以 console.log('body') 没有被执行

3. event.stopImmediatePropagation(): 阻止事件冒泡、把这个元素绑定的同类型事件也阻止

    目标元素


// 输出 span绑定的第一个事件函数 -- span绑定的第二个事件函数
// console.log('span绑定的第三个事件函数'); console.log('div'); 没有执行

4. event.currentTarget 和 event.target
   event.currentTarget： 事件绑定的元素
   event.target： 触发事件的元素

    目标元素

如果点击的是span，那么结果为：

image.png

如果没有点中span的范围，而点击在 div 的范围内，那么结果为：

image.png

四、自定义事件

还没搞懂。。

以上为学习笔记，参考资料：慕课网的课程