Skip to content
  1. 基本概念:DOM 事件的级别
  2. DOM 事件模型
  3. DOM 事件流
  4. 描述 DOM 事件捕获的具体流
  5. Event 对象的常见应用
  6. 自定义事件
  7. 移动端触摸事件

事件级别

javascript
  DOM0 element.=function(){}

  DOM2 element.addEventListener('click', function(){}, false)    //冒泡false和捕获true

  DOM3 element.addEventListener('keyup', function(){}, false)

事件流

面试-DOM事件-事件流.png

描述 DOM 事件捕获的具体流程

面试-DOM事件-事件捕获流程.png

javascript
window.addEventListener(
  'click',
  function (e) {
    console.log('window captrue')
  },
  true
)

document.addEventListener(
  'click',
  function (e) {
    console.log('document captrue')
  },
  true
)

document.documentElement.addEventListener(
  'click',
  function (e) {
    console.log('html captrue')
  },
  true
)
document.body.addEventListener(
  'click',
  function (e) {
    console.log('body captrue')
  },
  true
)

ev.addEventListener(
  'click',
  function (e) {
    console.log('ev captrue')
  },
  true
)

Event 对象的常见应用

javascript
event.preventDefault() // 阻止默认事件(a标签)
event.stopPropagation() // 阻止冒泡
event.stoplmmediatePropagation() //绑定两个事件触发A事件阻止B事件发生
event.currentTarget //返回绑定事件的元素
event.target //返回触发事件的元素

自定义事件(code

javascript
var eve = new Event('custome')
ev.addEventListener('custome', function () {
  console.log('custome')
})
events.addEventListener(
  'click',
  function () {
    window.dispatchEvent(eve)
  },
  true
)

移动端触摸事件

  1. touchstart:当手指触碰到屏幕的时候触发
  2. touchmove:当手指在屏幕上滑动的时候触发
  3. touchend:当手指离开屏幕的时候时候触发
  4. touchcancel 事件:当系统停止跟踪触摸的时候触发(少用)

touches:表示当前跟踪的触摸操作的 touch 对象的数组。

targetTouches:特定于事件目标的 Touch 对象的数组。

changeTouches:表示自上次触摸以来发生了什么改变的 Touch 对象的数组。

每个 touch 对象包含的属性:

  1. clientX:触摸目标在视口中的 x 坐标。
  2. clientY:触摸目标在视口中的 y 坐标。
  3. identifier:标识触摸的唯一 ID。
  4. pageX:触摸目标在页面中的 x 坐标。
  5. pageY:触摸目标在页面中的 y 坐标。
  6. screenX:触摸目标在屏幕中的 x 坐标。
  7. screenY:触摸目标在屏幕中的 y 坐标。
  8. target:触目的 DOM 节点目标。

冒泡

当点击一个元素触发事件时. 事件会先从元素的最外层父元素一层一层进入到触发的元素, 然后在从触发元素一层一层返回到最外层父元素, 从最外层一层一层进入的阶段叫事件捕获阶段, 从最里层一层一层往外的阶段叫事件冒泡

事件委托

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件

好处:给重复的节点添加相同操作,减少 dom 交互,提高性能

实现思路:给父组件添加事件,通过事件冒泡,排查元素是否为指定元素,并进行系列操作

Layout Switch

Adjust the layout style of VitePress to adapt to different reading needs and screens.

Expand all
The sidebar and content area occupy the entire width of the screen.
Expand sidebar with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Expand all with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Original width
The original layout width of VitePress

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.

Spotlight

Highlight the line where the mouse is currently hovering in the content to optimize for users who may have reading and focusing difficulties.

ONOn
Turn on Spotlight.
OFFOff
Turn off Spotlight.