前端基础整理-DOM事件

前言

事件的本质是程序各组成部分间的一种通信方式；本文主要介绍DOM事件级别，DOM事件模型，DOM事件流，Event对象常见应用等等,希望对我们有所帮助。

一、DOM事件级别

DOM标准已有4个，其中DOM1标准没有涉及事件相关的修改

1. DOM 0级别

el.onclick = function () {...}

// html -on方式

// js函数式
document.querySelector('.btn0').onclick = dom0

2. DOM 2级别

el.addEventListener('evnet-name', callback, [, useCapture]) *

  dom2
  
//IE9-:attachEvent()与detachEvent()。
//IE9+/chrom/FF:addEventListener()和removeEventListener()

IE9.0以下的IE浏览器不支持

3. DOM 3级别

对DOM2进行拓展，添加更多的事件类型

• UI事件类，当用户与页面上的元素交互时触发，如：load、scroll
• 鼠标事件，当用户用鼠标在页面执行操作时触发，如：dbclick、mouseup
• 键盘事件，当用户操作键盘在页面上执行操作时触发，如：keydown、keypress
• 滚动事件，当用户滚动鼠标滚轮或类似设备时触发，如：mousewheel
• 焦点事件，当元素获取或失去焦点时触发，如：focus、blur
• 文本事件，当文档控件输入文本时触发，如：textInput
• 合成事件，当IME(输入法编辑器)输入字符时触发，如：compositionstart
• 变动事件，当底层DOM结构发生变化时触发，如：DOMsubstreeModified
• 自定义事件

小结

DOM0时期：一个事件只能监听一个函数，且只有冒泡阶段

    dom0

// btn 
// div

DOM2之后：可以同事监听多个函数，且支持捕获和冒泡阶段
意义：DOM2标准的出现，统一了js的监听函数接口，也日益复杂的交互做好了铺垫。

二、DOM事件模型

捕获模型和冒泡模型

三、DOM事件流

一个事件发生后，会在子元素和父元素之间传播；经历捕获、目标、冒泡阶段。

1. 捕获阶段：从window对象自顶向下朝目标元素传播阶段。
2. 目标阶段：在目标元素处理事件阶段。
3. 冒泡阶段：从目标元素自底向上朝window对象传播阶段。

四、Event对象常见属性与应用

事件发生以后会产生一个 Event对象，其常见方法/属性如下：

• event.preventDefault()

// 阻止默认事件
// 实现一个最多输入6位数的demo

• event.stopPropagation()
• event.stopImmediatePropagation()

这两个都是组织冒泡；区别在于stopImmediatePropagation还能阻止别监听的其他函数不触发

// 实现一个表单验证的demo

  
  
  提交


// 可以有效的将检查逻辑和提交代码逻辑进行解耦

• event.currentTarget
• event.current

event.currentTarget始终是事件的监听者/event.current事件的发起者

// 事件委托/事件代理

  
1删除
  
2删除
  
3删除
  
4删除
  
5删除

事件代理的优势:

1. 减少内存消耗，提高性能
2. 动态绑定事件；例如：当删、增dom元素时，无需再次为子元素绑定事件

五、自定义事件

• Event
• CustomEvent

// 实现一个游戏启动场景demo
开始游戏

优势：各模块解耦，利于分工，便于扩展
缺点：要杜绝模块间的相互嵌套调用，否则定位问题难，建议由控制模块统一调度

六、事件节流与防抖

参考:

• 事件模型-阮一峰
• DOM事件机制