导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

JavaScript 的事件流模型有哪些？

• 事件冒泡：由最具体的元素接收，并往上传播
• 事件捕获：由最不具体的元素接收，并往下传播
• DOM 事件流：事件捕获 -> 目标阶段 -> 事件冒泡

如何阻止事件冒泡？

function stopBubble(e) {
  if (e.stopPropagation) {
    e.stopPropagation()
  } else {
    window.event.cancelBubble = true;
  }
}

如何阻止事件默认行为？

function stopDefault(e) {
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    window.event.returnValue = false;
  }
}

⭐ 什么是事件委托？

当子元素都需要绑定相同事件时，可以将事件绑在父元素上，优点有：

• 绑定在父元素，则只需绑定一次，节省性能
• 后续新增的子元素也可以触发父元素绑定的事件

鼠标事件有哪些？

键盘事件有哪些？

注明：event 对象上的 keyCode 属性，是按下的按键的 ASCLL 值，通过这个值可辨别是按下哪个按键。ASCLL 表在此 ASCII 码一览表，ASCII 码对照表

触摸事件有哪些?

移动端的触摸事件与鼠标事件不同，它们专为触摸屏设备设计，常用于处理手指的滑动、点击等交互。以下是常见的移动端触摸事件，按照名称、触发条件和用途进行了整理。

事件说明：

1. touchstart：类似于鼠标的 mousedown，当用户手指接触屏幕时触发。可以用来记录触摸的起点，或开始处理滑动的逻辑。
2. touchmove：类似于鼠标的 mousemove，当用户手指在屏幕上滑动时触发。常用于处理拖动或滑动手势。
3. touchend：类似于鼠标的 mouseup，当用户手指离开屏幕时触发。可以用来检测触摸操作的结束，常用于处理点击事件或者结束滑动。
4. touchcancel：当系统取消触摸事件时触发，可能是因为触摸超出了屏幕边缘或其他系统中断。

触摸事件中的重要属性：

• touches：当前屏幕上所有手指的触摸点列表。
• targetTouches：当前与事件目标相关的手指的触摸点列表。
• changedTouches：自上次触摸事件后发生了变化的触摸点列表，通常是引发事件的触摸点。

这些触摸事件为移动设备提供了灵活的交互方式，允许开发者通过手势进行更加丰富的操作，例如滑动、缩放、旋转等。

JS 中鼠标事件的各个坐标？

target 和 currentTarget 的区别？

• target
  • 当前触发事件的元素
• currentTarget
  • 绑定事件的元素

⭐ JS 中如何将页面重定向到另一个页面？

• 1、使用 location.href：
  • window.location.href = "<https://www.onlineinterviewquestions.com/>")
• 2、使用 location.replace：
  • window.location.replace("<https://www.onlineinterviewquestions.com/>")