1. 环境对象this
目标: 能够分析判断函数运行在不同环境中this所指代的对象
环境对象: 指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境
作用: 弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this 指代的对象也不同
- [谁调用， this 就是谁] 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以this 指代 window
2. 环境对象this
简单来说，就是一个函数当作参数传递给另一个函数的时候，这个函数就是回调函数 常见的使用场景：
function fn(){
console.log('我是回调函数')
}
setInterval(fn, 1000)
- 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
- 回调函数本质还是函数，只不过把它当成参数使用
- 使用匿名函数作为回调函数比较常见
3. 事件流
3.1 事件流和两个阶段说明
- 事件流指的是事件完整执行过程中的流动路径
- 说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
- 简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
3.2 事件捕获
-
概念：从DOM的根元素开始去执行对应的事件（从外到里）
-
事件捕获需要写对应代码才能看到效果。
-
代码：
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制) -
说明:
- addEventListener第三个参数传入true 代表是捕 获阶段触发（很少使用)
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用LO事件监听，则只有冒泡阶段，没有捕获
3.3 事件冒泡
目标：能够说出事件冒泡的执行过程
事件冒泡概念:
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
- 简单理解:当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
- 事件冒泡是默认存在的
- L2事件监听第三个参数是 false，或者默认都是冒泡
3.4 阻止冒泡
目标:能够写出阻止冒泡的代码
- 问题:因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
- 需求:若想把事件就限制在当前元素内，就需要阻止事件冒泡
- 前提:阻止事件冒泡需要拿到事件对象
语法:事件对象.stopPropagation()- 注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
3.5 解绑事件
on事件方式，直接使用null覆盖就可以实现事件的解绑
语法：
// 绑定事件
btn.onclick = function(){
alert('点击了')
}
// 解绑事件
btn.onclick = null
addEventListener方式，使用removeEventListener
（匿名函数无法解绑）
// 绑定事件
function fn(){
alert('点击了')
}
btn.addEventListener('click',fn)
// 解绑事件
btn.removeEventListener('click',fn)
鼠标经过事件的区别
鼠标经过事件:
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果(推荐)
两种注册事件的区别
- 传统on注册(LO)
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null警盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
- 事件监听注册 (L2)
- 语法：addEventListener(事件类型事件处理函数，是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型，事件处理函数获取捕获或者旨泡阶段)
- 匿名函数无法被解绑
