js中的事件处理

事件对象

element.addEventListener('click', function(event) {
  console.log(event); // event 是事件对象
});

event 是由浏览器自动传入的事件对象（MouseEvent 实例），它包含了本次点击事件的所有信息。

• target 实际被点击的元素
• currentTarget 绑定事件监听器的元素（element 本身）
• type 事件类型，例如 'click'
• clientX/clientY 鼠标点击时相对于视口的坐标
• pageX/pageY 鼠标点击时相对于页面的坐标
• button 哪个鼠标键被点击（0=左键，1=中键，2=右键）
• ctrlKey、shiftKey 等 是否同时按下了修饰键

常用方法

方法名	作用
preventDefault()	阻止浏览器默认行为（如链接跳转、表单提交）
stopPropagation()	阻止事件继续冒泡（但不会阻止当前元素上的其他处理器）
stopImmediatePropagation()	阻止冒泡并阻止当前元素上后续的所有处理器执行

---

鼠标事件专属属性（MouseEvent）

如 click, mousedown, mousemove：

属性名	说明
clientX, clientY	相对于视口的坐标
pageX, pageY	相对于整个页面的坐标
screenX, screenY	相对于屏幕的坐标
button	哪个鼠标按钮被按下（0=左键，1=中键，2=右键）
ctrlKey, shiftKey, altKey, metaKey	是否按住了修饰键

---

键盘事件专属属性（KeyboardEvent）

如 keydown, keyup：

属性名	说明
key	表示按下的键，如 'a', 'Enter'
code	表示物理按键的代码，如 'KeyA', 'Enter'
repeat	是否是长按触发的重复事件
ctrlKey, shiftKey, altKey, metaKey	同鼠标事件，修饰键状态

---

触摸事件（TouchEvent）

常用于移动设备：

属性名	说明
touches	当前在屏幕上的所有触点列表
targetTouches	当前元素上的触点列表
changedTouches	本次事件中发生变化的触点（如新增或移除的）

---

自定义事件（CustomEvent）

可以人为创建带数据的事件对象：

const event = new CustomEvent('myEvent', {
  detail: { name: 'Alice' }
});
element.dispatchEvent(event);

访问时可用 event.detail 获取传递的数据。

---

事件对象的继承结构

事件对象是构造函数的实例，具有如下继承关系：

Event
 ├── UIEvent
 │    └── MouseEvent
 │         └── PointerEvent
 └── FocusEvent
 └── KeyboardEvent
 └── TouchEvent
 └── CustomEvent

不同类型的事件对象扩展自 Event 类，提供各自专属属性。

事件冒泡和事件捕获

冒泡：事件由内到外地执行，事件流默认处于冒泡状态
捕获：事件由外到内地执行

1. 阻止事件冒泡

addEventListener('click',(e)=>{
	e.stopPropagation()//或
	//e.cancelBubble = true
	fn()
})

2. 设置事件为捕获

事件流会优先执行捕获事件，然后按照冒泡顺序执行冒泡事件

addEventListener('click',()=>{
	fn()
},true)

关于事件循环

JavaScript引擎本身是单线程的，负责代码的执行。
代码解析时，遇到同步执行的代码就加入执行栈，遇到异步任务就交给其他线程处理，（由运行环境提供），异步操作完成后，他的回调函数会被放入任务队列中排队
事件循环机制负责在主进程空间时，从任务队列中取出回调函数交给主线程执行

任务队列

任务分为微任务和宏任务，事件循环机制会不断遍历微任务队列并放入执行栈，等微任务队列为空时才去遍历宏任务队列

• 微任务
  promise.then(), promise.catch()
  new MutationObserver()
  process.nextTick()
• 宏任务
  setTimeOut()
  setInterval()
  setImmediate()