目录 : 事件 / 高阶函数 / 环境对象 / 变成思想
目标 : 给元素注册事件 / 利用事件实现网页交互效果
js与html的交互是通过事件实现的 , 事件代表文档或浏览器窗口中某个有意义的时刻 . 可以使用仅在事件发生时执行的监听器(也叫处理程序) 订阅事件 . 能够做到页面的行为( 在js中定义 ) 与页面展示 ( 在html和css中定义 )的分离 .
事件流指的是事件完整执行过程中的流动路径
页面哪个部分拥有特定事件呢 ? 想象涟漪 , 石子不仅在一个圈里 , 而是在所有圈里 .
事件流描述了页面接收事件的顺序 , IE和网景提出了完全相反的事件流方案 , IE支持事件冒泡 , 网景支持事件捕获
事件冒泡 : 事件被定义为从具体的元素开始触发( 文档树中最深的节点 ) , 向上传播至没有那么具体的元素 (文档) .
或 - 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
事件冒泡是默认存在的 , 一直冒泡到window对象 . 所有现代浏览器都支持事件冒泡 .
事件捕获的意思是 最不具体的元素应最先接收到节点 , 而最具体的节点应该最后接收到事件 . 事件捕获实际上是为了在事件到达最终目标之前拦截事件 .
addEventListener第三个参数传入true代表是捕获阶段触发(了解即可)
若传入false代表冒泡阶段触发,默认就是false
通常建议使用事件冒泡 , 特殊情况下可以使用事件捕获
事件处理程序
事件意味着用户或浏览器执行的某种动作 . 为响应事件而调用的函数被称为事件处理程序 , 或事件监听器 .
DOM0事件处理程序 : onclick
把一个函数赋值给(DOM元素的)一个事件处理程序属性 , 所赋函数被视为元素的方法 . 事件处理程序会在元素的作用域中运行 , this等于元素 .
事件源.on事件 = function() { }
Ø 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
Ø 直接使用null覆盖就可以实现事件的解绑
Ø 都是冒泡阶段执行的
DOM2 addEventListener() , removeEventListener()
事件源.addEventListener(事件, 事件处理函数)
接收三个参数 , 事件名 , 事件处理函数 ,和一个布尔值 , true表捕获阶段调用 , false表冒泡阶段调用 . 匿名函数无法被解绑
优势是为同一个事件添加多个事件处理程序
事件对象
所有相关信息都会被收集并存储在一个名为event ( e , ev )的对象中
event对象是传给事件处理程序的唯一参数
事件监听三要素 :
事件源: 哪个dom元素被事件触发了
事件: 用什么方式触发,比如鼠标单击 click、鼠标经过 mouseenter 等
事件调用的函数: 要做什么事
事件类型
- 鼠标事件
- 键盘事件 keydown keyup
- 焦点事件 表单获得光标 fcous blur
- 文本事件 表单输入触发 input
高阶函数
函数表达式 、回调函数
函数的高阶使用方式 ==> 把函数当成值来使用
函数表达式
本质: 把匿名函数赋值给变量
let fn = function () {
console.log('这就是函数表达式')
}
// console.log(fn)
fn()
回调函数:把一个函数当成参数传递给另外一个函数,就说该函数是个回调函数
比如注册事件 , 定时器
forEach map filter every 数组方法
异步解决方案 Promise Async await
事件处理函数中的环境对象 this 指向谁呢? => 事件源
排它思想
当前元素为A状态,其他元素为B状态
使用:
- 干掉所有人 , 遍历给所有元素移除类名
- 复活他自己
如果最开始只有一个高亮元素 , 可以不需遍历 , 找到高亮元素并变为B状态 , 然后将当前元素变为高亮 , 如果有多个 , 因为querySelectorAll返回伪数组 , 无法直接移除类名
document.querySelector('css选择器').classList.remove('类名')