事件冒泡
- 因为默认就有冒泡阶段的存在，所以容易导致事件影响到父级元素（祖先元素）
- 若想把事件就限制在当前元素内，就需要阻止事件冒泡
- 阻止事件冒泡需要拿到事件对象
- 事件对象.stopPropagation ：如e.stopPropagation
- 而不是e.target.stopPropagation;e.target是触发事件的实际元素
- e.type是触发事件的名称点一次触发一次
事件代理
- 原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务
- 通过事件对象e.target再在target对象里找到tagName里找到标签名，用if判断方法条件里写e.target.tagName === ‘(标签名)’ 也就是说在父元素的盒子里找到子元素盒子标签通过if判断用e.target.tagName方法找到子元素->这就是事件委托
- 注意：标签名严重区分大小写；而且这里是标签名而不是类名，如果是类名则用e.target.matches或者e.target.classList.contains
- 这里用了事件委托，没必要用for循环,直接在if方法体里先删 要加的css样式再后加，注：删css样式直接获取DOM元素就可以了，加的话得用事件对象e.target添加css样式
阻止冒泡
- 因为默认就有冒泡的存在，所以容易影响父元素
- 阻止冒泡需要拿到事件对象 注：给指定DOM对象注册事件的对象就叫事件对象
- 语法： 事件对象。stopPropagation(
解绑事件 作用：
- L2事件 addEventListener必须使用removeEventListener
- 如：使用事件对象.removeEventListener（‘click’，函数名
不是调用不能加括号）实现解绑 - 注意：匿名函数无法解绑如：removeEventListener（‘click’，function(){}）
- L0事件 直接使用null覆盖就可以实现事件的解绑
- 如：事件对象.onclick = function(){}
- 使用：事件对象.onclick = null
阻止默认行为
- 阻止链接的跳转等等
- 当点击提交按钮时阻止对表单的提交
- 语法： 事件对象.preventDefault()
页面加载事件
- 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到，因为是代码是从上往下执行的，老代码写在上面就需要load事件
load事件基本语法：
- window.addEventListener('load', function() { 从上往下执行完再执行的内容 })
- 因为使用window这个这个语法直接跳过这个代码执行下面的，等其他加载完了在执行
DOMContentLoaded事件基本语法：
- document.addEventListener('DOMContentLoaded', function() { }); 给 document 添加 DOMContentLoaded 事件
- 作用：当初始的 HTML 文档被完全加载和解析完成之后就触发，而无需等待样式表、图像等完全加载
- load和DOMContentLoaded的区别：
load注册在window上，DOMContentLoaded注册在document上；load事件要晚于DOMContentLoaded事件被执行；DOMContentLoaded事件是在文档（DOM）完全加载并解析完毕后立即触发，无需等待样式表、图片等外部资源加载完成；load事件要求文档（DOM）本身已经加载完毕，还要求所有关联的资源（包括但不限于图片、脚本文件、CSS文件等）也全部加载完成 ，才触发。
load和DOMContentLoaded两个事件的场景选择：
DOMContentLoaded更适合于那些只需要文档结构而不需要额外资源就可运行的情况；load适用于需要确保整个页面包括其引用的所有资源都已加载完成的情况下。
