事件监听 || 事件类型 || 事件对象 || tihs

权泉全
129 阅读6分钟

事件监听

  • 事件监听也称为: 事件注册、事件绑定
  • 在 JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给（DOM 元素的）一个事件处理程序属性。这也是在第四代 Web 浏览器中开始支持的事件处理程序赋值方法，直到现在所有现代浏览器仍然都支持此方法，主要原因是简单。要使用 JavaScript 指定事件处理程序，必须先取得要操作对象的引用

事件监听三要素：

  1. 事件源
  • 谁被触发了？哪个元素上触发
  1. 事件类型
  • 什么情况下触发？鼠标单击 click、鼠标经过 mouseenter等
  1. 事件处理函数
  • 要做什么事情，把要做的事放到事件处理函数里面

L0事件处理程序（on）

  • DOM L0 ：是 DOM 的发展的第一个版本，使用 on.事件类型 来注册事件
  • 每个元素（包括 window 和 document）都有通常小写的事件处理程序属性，比如 onclick。只要把这个属性赋值为一个函数即可：
  • 语法btn.onclick = function(){}
  • image.png
  • 这里先从文档中取得按钮，然后给它的 onclick 事件处理程序赋值一个函数。
  • 注意： on 方式同名事件会被覆盖

移除 L0 (on)事件处理程序：

  • 移除事件处理函数，也称为解绑事件
  • 语法：btn.onclick = null;
  • image.png

L2事件处理程序（addEventListener）

  • DOM2 Events 为事件处理程序的赋值和移除定义了两个方法：addEventListener() 和 removeEventListener()。这两个方法暴露在所有 DOM 节点上，它们接收 3 个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序。
  • 仍以给按钮添加 click 事件处理程序为例，可以这样写：
  • image.png
  • 语法 ：元素对象.addEventListener('事件类型'，事件处理函数，布尔值)
  • 事件发生后，想要执行的代码写到事件处理函数里面
  • 当触发指定的事件时，则事件处理函数就会被执行
  • 事件监听是将事件处理函数注册到元素对象身上
  • 注意： L2方式的主要优势是可以为同一个事件添加多个事件处理程序，不会覆盖。

移除 L2 (addEventListener)事件处理程序：

  • 第三个参数没有可以不写，默认false
  • removeEventListener(事件类型, 事件处理函数)
  • image.png
  • 注意： 匿名函数无法解绑。

事件类型

  • 事件类型的大小写敏感的字符串，统一用小写字母

一、鼠标事件

1. click

  • click -- 鼠标点击触发
  • 拓展：
  • DOM.click() -- 可以让实现鼠标自动点击一次。
  • DOM.disabled = true / false 禁用 / 启用 按钮

2. mouseenter || mouseleave

  • mouseenter -- 鼠标经过触发
  • mouseleave -- 鼠标离开触发
  • 这两个鼠标事件无事件冒泡

3. mouseover || mouseout

  • mouseover -- 鼠标经过触发
  • mouseout -- 鼠标离开触发
  • 这两个鼠标事件有事件冒泡

4. mousemove

  • mousemove -- 当鼠标移入被选元素内后，任意移动一个像素点都会触发。

pointerEvents（拓展）

  • DOM.style.pointerEvents = 'none'; -- 不对鼠标事件做出反应

二、焦点事件

1.focus

  • focus --获得焦点时触发
  • 拓展：
  • DOM.focus() 自动获得焦点

2.blur

  • blur --失去焦点时触发
  • 拓展：
  • DOM.focus() 自动失去焦点

三、键盘事件

1.keydown

  • keydown --键盘按下时触发
  • 注意： keydown获取值的时候得不到最后一次按键的值

2.keyup

  • keyup --键盘抬起时触发

四、文本事件

input

  • input -- 表单发生变化时触发

键盘事件 和 文本事件的执行顺序

  • keydown → input → keyup

五、页面加载事件

1.load

  • 事件名：load

  • 监听页面所有资源加载完毕给 window 添加 load 事件

  • 加载外部资源（如图片、外联CSS和JavaScript等）全部加载完毕时触发的事件

  • 应用场景：有些时候需要等页面资源全部处理完了做一些事情

  • image.png

2.DOMContentLoaded

  • 事件名：DOMContentLoaded
  • 监听页面DOM加载完毕
  • 当初始的HTML 文档被完全加载和解析完成之后就触发，而无需等待样式表、图像等完全加载
  • image.png

六、页面滚动事件

  • 事件名：scroll
  • 给 window 或 document 添加 scroll 事件；监听某个元素的内部滚动直接给某个元素加即可
  • 监听整个页面滚动
  • 滚动条在滚动的时候持续触发的事件
  • 应用场景： 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
  • Snipaste_2023-04-08_11-12-50.png

拓展：scrollLeft和scrollTop属性

  • scrollLeft --获取被卷去的左侧的距离
  • scrollTop --获取被卷去的头部的距离
  • 注意： 这两个值是可读写的
  • image.png
  • image.png

七、页面尺寸事件

  • 事件名：resize
  • 会在窗口尺寸改变的时候触发
  • image.png

拓展：clientWidth和clientHeight属性

  • 元素大小，不包含border、padding等，只读
  • 计算clientWidth和clientHeight时，边框，边距或滚动条(如果存在)被排除在外
  • 这两个属性可以获取元素的可见宽度和高度
  • 这两个属性可以获取元素的可见宽度和高度
  • 这些属性只能只读，不能修改

八、移动端事件

  • M端(移动端)有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
  • touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
  • 常见的触屏事件如下：
  • image.png image.png

九、changes事件

  • 事件名：change
  • change具有改变的意思，change事件会在元素数据发生变化的时候触发。
  • 该事件仅适用于文本域（text field），以及 textarea 和 select 元素等。

事件对象

  • 在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。例如，鼠标操作导致的事件会生成鼠标位置信息，而键盘操作导致的事件会生成与被按下的键有关的信息。所有浏览器都支持这个 event 对象，尽管支持方式不同
  • 可以命名为event或ev或e都行
  • 语法：
  • DOM.addEventListener('click',function(event){}
  • image.png

常见事件对象

  • image.png
  • e.preventDefault() 阻止元素发生默认的行为（form表单默认提交；链接点击默认跳转等）

环境对象 - this

  • 环境对象：指的是函数内部特殊的 this , 它指向一个对象，并且受当前环境影响
  • 作用：弄清楚this的指向，可以让我们代码更简洁
  • 函数的调用方式不同，this 指代的对象也不同
  • 【谁调用， this 就指向谁】 是判断 this 指向的粗略规则
  • 直接调用函数，其实相当于是 window.函数，所以 this 指代 window -image.png
  • this与e.target 相似。区别在于e.target指向触发事件的元素。

this 和 e.target 一样的情况

  • image.png

this 和 e.target 不一样的情况

  • 以下情况如果点击 li ：

  • this 指向 ul

  • e.target 指向 被点击的 li

  • image.png

  • image.png

  • image.png

avatar
文章
阅读
粉丝