《JavaScript编程基础》课件-任务二：事件处理.pptxVIP

单击此处添加标题

汇报人：XXX

XX年XX月XX日

目录

CONTENTS

01

单击添加章节标题

02

单击添加章节标题

03

单击添加章节标题

04

单击添加章节标题

05

单击添加章节标题

06

单击添加章节标题

PART.01

单击此处添加章节标题

事件与交互机制的定义

事件触发机制

用户交互行为（如点击、输入）或浏览器状态变化（如页面加载）会触发事件，事件发生时若有监听器则生成消息加入队列。

JavaScript单线程特性决定了交互事件不会立即执行，而是先入队等待，仅当调用栈为空时事件循环才取出任务执行。

通过addEventListener或事件属性绑定监听器才能捕获事件，未绑定监听的事件将被丢弃，不会进入消息队列。

单线程响应模型

事件监听绑定

事件流模型解析

事件到达触发节点，该阶段会执行目标元素上注册的监听器，无论监听器注册在捕获还是冒泡阶段都会被触发。

事件从document向下传播至目标节点的路径，此阶段可通过addEventListener第三个参数设为true来监听捕获过程。

事件从目标节点向上传播回document，此阶段默认触发，可通过stopPropagation阻止事件继续向上层元素传播。

利用冒泡机制在父元素统一监听子元素事件，减少重复绑定，特别适合动态生成的元素事件处理。

捕获阶段

目标阶段

冒泡阶段

事件委托应用

DOM事件级别规范

DOM