【金秋打卡】第15天 从函数到函数式编程之路

课程名称：破解JavaScript高级玩法
课程章节：第7章 如果不用vue，react框架，如何操作DOM？
主讲老师：Cloud

课程内容：

今天学习的内容包括：
7-6 DOM事件原理和避坑指南——window 是 BOM, document 是DOM。window引用document。

课程收获：

window 和 document的关系

• BOM (Browser Object Model): 浏览器对象模，没有相关标准，一些和网页无关的浏览器功能。如：window、location、navigator、screen、history等对象
• DOM (Document Object Model): 文档对象模型， W3C 的标准, HTML和XML文档的编程接口。
• window 属于 BOM, document 是DOM中的核心。但是window引用着document，仅此而已。

DOM0级的事件

<div>
	<button id="btn1" .onclick="console.log('按钮1被点击了')">按钮1(代码)</button>
</div>

• 效率高
• 节点上onclick属性被Node.cloneNode克隆，通过JS赋值的onclick不可以
• 移除事件非常简单
• 兼容性好

DOM0事件注意事项

• 事件处理函数中，this是当前的节点
• 如果调用函数，会在全局作用域查找
• 唯一性，只能定义一个的事件回调函数

DOM2级的事件:事件注册

• 语法：
• target.addEventListener(type,listener,useCapture)
• target.addEventListener(type,listener,options)
• useCapture: true，捕获阶段传播到目标的时候触发，反之冒泡阶段传到目标的时候触发。默认值flase, 即冒泡时。

DOM2级的事件: once

• 是否只响应一次
• 最典型的应用就是 视频播放，现代浏览器可能需要用户参与后，视频才可以有声播放

DOM2级的事件: passive

• 设置为true时，事件处理成不会调用preventDefault()
• 某些触摸事件（以及其他）的事件监听器在尝试处理滚动时, 可能阻止浏览器的主线程，从而导致滚动处理期间性能可能大大降低。

var elem = document.getElementById( 'elem' );
elem.addEventListener ( 'touchmove ' , function listener() { /* do something */ },{ passive: true });

DOM2级的事件: signal

• AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除
• AbortSignal 也被用于取消fetch请求

DOM2级的事件: 有趣的 useCapture

• 如果这个参数相同并且事件回调函数相同，事件不会被添加

DOM2级的事件: event.preventDefault

• 阻止默认的行为，比如有href属性的a标签不会跳转，checkbox的选中不会生效等。
• 事件依旧还会继续传播

DOM2级的事件: stopPropagation

• 阻止捕获和冒泡阶段中当前事件的进一步传播。

DOM2级的事件: stopImmediatePropagation

• 阻止监听同一事件的其他事件监听器被调用

DOM2级的事件: target 和 currentTarget

• target: 触发事件的元素。 谁触发。
• currentTarget: 事件绑定的元素。 谁添加的事件监听函数。

DOM2级的事件: 事件委托

• 利用事件传播的机制，利用外层节点处理事件的思路。
• 优点1：减少内存消耗
• 有点2："动态性"更好

DOM3级事件

• DOM3 Events在DOM2 Events基础上重新定义了事件，并增加了新的事件类型

1. 用户界面事件( UlEvent ) :涉及与BOM交互的通用浏览器事件。比如: load、scroll
2. 焦点事件( FocusEvent ) :在元素获得和失去焦点时触发。比如focus, blur
3. 鼠标事件(MouseEvent ) :使用鼠标在页面上执行某些操作时触发。
4. 滚轮事件( WheelEvent ) :使用鼠标滚轮（或类似设备）时触发。比如: mousewheel
5. 输入事件(lnputEvent ) :向文档中输入文本时触发。
6. 键盘事件(KeyboardEvent ) :使用键盘在页面上执行某些操作时触发。比如如: keydown、keypress
7. 合成事件(CompositionEvent ) :在使用某种IME ( Input Method Editor，输入法编辑器）输入字符时触发。

注意事项和建议

1. DOMO级事件—定程度上可以复制
2. DOM2级别事件不可以复制
3. 合理利用选项once
4. 合理利用选型passive提升性能
5. capture选项相同和并且事件回调函数相同，事件不会被添加
6. 因为都是继承于EventTarget，任何一个节点都是事件中心
7. 合理利用事件代理

今天 学习了 7-6 DOM事件原理和避坑指南，了解了Window属于BOM，document属于DOM，window引用了document，也了解了DOM的三个级别的事件特性。对自己说一句，加油😀~

坚持打卡，坚持学习！明天见💪~
​
​

​