DOM事件基础

目录 : 事件 / 高阶函数 / 环境对象 / 变成思想
目标 : 给元素注册事件 / 利用事件实现网页交互效果

js与html的交互是通过事件实现的 , 事件代表文档或浏览器窗口中某个有意义的时刻 . 可以使用仅在事件发生时执行的监听器(也叫处理程序) 订阅事件 . 能够做到页面的行为( 在js中定义 ) 与页面展示 ( 在html和css中定义 )的分离 .

事件流指的是事件完整执行过程中的流动路径
页面哪个部分拥有特定事件呢 ? 想象涟漪 , 石子不仅在一个圈里 , 而是在所有圈里 .
事件流描述了页面接收事件的顺序 , IE和网景提出了完全相反的事件流方案 , IE支持事件冒泡 , 网景支持事件捕获

image.png

事件冒泡 : 事件被定义为从具体的元素开始触发( 文档树中最深的节点 ) , 向上传播至没有那么具体的元素 (文档) .
或 - 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
事件冒泡是默认存在的 , 一直冒泡到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状态
使用:

  1. 干掉所有人 , 遍历给所有元素移除类名
  2. 复活他自己

如果最开始只有一个高亮元素 , 可以不需遍历 , 找到高亮元素并变为B状态 , 然后将当前元素变为高亮 , 如果有多个 , 因为querySelectorAll返回伪数组 , 无法直接移除类名

 document.querySelector('css选择器').classList.remove('类名')
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容