Lazy loaded image
🗒️前端-阶段03-事件与监听-Day04
00 分钟
2024-7-26
2024-10-29
type
status
date
slug
summary
tags
category
icon
password

1 回顾 元素操作

2 HTML DOM

2.1 表单相关元素

① form 元素

② 文本输入框类和文本域(input 和 textarea)

③ select 元素

快速创建 option 元素的方式:

3.2 表格相关元素

① table 元素

② tableRow 元素(tr 元素)

③ tableCell 元素 (td 或 th)

3.3 快速创建 img 元素

3 事件

3.1 事件监听

① 给元素监听事件的三种方式

第一种方式: 事件作为HTML标签的属性:
第二种方式: 事件作为元素对象的方法:
第三种方式:使用 addEventListenrer 方法:

② 解除事件的监听

第一种和第二种方式监听的事件:
第三种方式监听的事件:

3.2 事件流

事件触发的过程分为三个阶段:
捕获阶段: 从 window、document 、html 开始层层向下,直到找到具体发生了事件动作的元素,该元素称为目标元素。
目标阶段: 找到目标元素的那一刻,标志着捕获阶段的结束,冒泡阶段的开始。
冒泡阶段: 从目标元素开始,层层向上,直到 html、document、window, 事件的回调函数默认在冒泡阶段执行。
注意:事件流也可以只分为捕获阶段和冒泡阶段。
注意: addEventListener 设置第三个参数为 true,该事件会在捕获阶段触发!

3.3 事件的回调函数中 this 的指向

上一篇
前端-阶段03-事件与监听-Day05
下一篇
前端-阶段03-BOM&DOM-Day03

评论
Loading...