第 3️⃣ 座大山：DOM 事件

2022-09-06 | 2024-05-14 | 2.1k | 7 分钟

事件流

事件流：当某个事件发生的时候，哪些元素会监听到该事件发生，这些元素发生该事件的顺序，当一个元素发生了某个事件时，那该元素的所有祖先元素都发生了该事件；

事件的传播：

事件冒泡 （默认）：先触发最里层的元素，然后再依次触发外层元素；

事件捕获：先触发外层的元素，然后再依次触发里面元素；

事件注册

HTML 元素中注册事件

html

JavaScript

<button onclick="test('张三')">点击我</button>

function test(name) {
  console.log(`我知道你已经点击了，${name}`);
}

dom0 级事件

这种方式虽然相比 HTML 元素中注册事件有所改进，但是它也有一个缺点，那就是它依然存在每个元素只能绑定一个函数的局限性；

事件注册：将事件名称前面加上 on ，作为 dom 的属性名，给该属性赋值为一个函数；

事件移除：重新给事件属性赋值，通常赋值为 null 和 undefined；

// 监听事件（属性名为`on+事件类型`）
dom.onclick = function () {
    // 处理函数
};
// 移除监听事件
dom.onclick = null;

dom2 级事件

DOM2 级通过 addEventListener 方法来为一个 DOM 元素添加多个事件处理函数；

事件注册：dom对象.addEventListener('事件'，事件函数, 布尔)，在 IE8 及以下不兼容，需要使用 attachEvent ，如果这个布尔值为 true ，则在捕获阶段处理事件，如果为 false，则在冒泡阶段处理事件；

事件移除：dom对象.removeEventListener('事件'，事件函数)，在 IE8 及以下不兼容，需要使用 detachEvent

function handler1() {
    // 处理函数1
}
function handler2() {
    // 处理函数2
}

dom.addEventListener('click', handler1);
dom.addEventListener('click', handler2);
dom.removeEventListener('click', handler1); // 移除监听函数1

dom0 VS dom2

dom2 可以为某个元素的同一个事件，添加多个处理程序，按照注册的先后顺序运行；
dom2 允许开发者控制事件处理的阶段，使用第三个参数，表示是否在捕获阶段触发，如果元素是目标元素 （事件源），第三个参数无效；
事件移除的方式不一样，dom2 中如果要移除事件，不能使用匿名函数；

事件处理函数

当事件发生时，会自动调用事件处理函数，并向函数传递一个参数，该参数称之为事件对象，里面包含了事件发生的相关信息，比如鼠标位置、键盘按键等等

常见的事件对象有：鼠标事件对象、键盘事件对象

在事件处理函数中 this 始终指向注册事件的 dom

事件对象

获取事件对象

通过事件处理函数的参数获取

旧版本的IE浏览器通过 window.event 获取

事件对象的通用成员

target：事件目标 （事件源），srcElement 是 IE 的兼容写法
currentTarget：获取绑定事件的元素，等效于 this
type：获取事件的类型
阻止浏览器默认行为
1. preventDefault 方法：全支持
```
var test = document.getElementById("test");
test.onclick = function(event){
    event.preventDefault();
}
```
2. returnValue 属性：该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性
```
var test = document.getElementById("test");
test.onclick = function(event){
    event.returnValue = false;
}
```
3. return false 是一条语句，该语句写在事件处理函数中也可以阻止默认行为，不建议滥用，jQuery 中可以同时阻止冒泡和默认事件
```
var test = document.getElementById("test");
test.onclick = function(){
    return false;
}
```
展示默认事件是否被阻止：
1. cancelable 属性：返回 true 时，表示可以阻止，否则表示不可阻止；
  html
  JavaScript
```
<a id="test" href="https://www.baidu.com">百度</a>
```
```
var test = document.getElementById("test");
test.onclick = function (event) {
    test.innerHTML = event.cancelable; // true
}
```
2. defaultPrevented 方法：返回 true 表示默认事件被阻止，返回 false 表示默认事件未被阻止
stopPropagation() 阻止事件冒泡
eventPhase：得到事件所处的阶段 事件捕获 1、事件目标 2、事件冒泡 3

鼠标事件

事件类型

事件名称	触发时机
click	鼠标主按钮按下抬起后触发
dblclick	用户双击主鼠标按键触发（频率取决于系统配置）
mousedown	按下鼠标任意按键时触发
mouseup	抬起鼠标任意按键时触发
mousemove	鼠标在元素上移动时触发
mouseover	鼠标进入元素时触发（冒泡），over 和 out 不考虑子元素，从父元素移动到子元素，对于父元素而言，仍然算作离开
mouseout	鼠标离开元素时触发（冒泡）
mouseenter	鼠标进入元素时触发（不冒泡），enter 和 leave 考虑子元素，子元素仍然是父元素的一部分
mouseleave	鼠标离开元素时触发（不冒泡）
wheel	鼠标滚轮滚动时触发

事件对象

所有的鼠标事件，事件处理程序中的事件对象，都为 MouseEvent

属性	描述
altKey	触发事件时，是否按下了键盘的 alt 键
ctrlKey	触发事件时，是否按下了键盘的 ctrl 键
shiftKey	触发事件时，是否按下了键盘的 shift 键
button	触发事件时，鼠标按键类型 (左键 0、中键 1、右键 2)
pageX、pageY	当前鼠标距离页面的横纵坐标
clientX、clientY	鼠标相对于视口的坐标，与 x、y 等价
offsetX、offsetY	鼠标相对于事件源的内边距的坐标
screenX、screenY	鼠标相对于屏幕
movementX、movementY	只在鼠标移动事件中有效，相对于上一次鼠标位置，偏移的距离

键盘事件

事件类型

事件名称	触发时机
keydown	按下键盘上任意键触发，如果按住不放，会重复触发此事件，如果阻止了事件默认行为，文本不会显示
keyup	某个键被抬起时触发
keypress	按下键盘上一个字符键时触发，如果阻止了事件默认行为，文本不会显示

事件对象

KeyboardEvent

属性	描述
code	得到按键字符串，适配键盘布局
key	得到按键字符串，不适配键盘布局，能得到打印字符
keyCode、which	得到键盘编码

表单事件

事件名称	触发时机
focus	元素聚焦的时候触发（能与用户发生交互的元素，都可以聚焦），该事件不会冒泡
blur	元素失去焦点时触发，该事件不会冒泡
submit	提交表单事件，仅在 form 元素有效
change	文本改变事件
input	文本改变事件，即时触发
reset	表单被重置时触发

其他事件

事件名称	触发时机
load	window 事件，页面中所有资源全部加载完毕的事件（几乎不用）
DOMContentLoaded	document 事件，dom 树构建完成后发生
readystatechange	window 事件，表示浏览器页面的状态， loading 加载中、interactive 可交互、complete 完成
load	图片事件，图片资源加载完毕的事件
beforeunload	window 事件，关闭窗口时运行，可以阻止关闭窗口
unload	window 事件，关闭窗口时运行
scroll	窗口发生滚动时运行的事件，通过 scrollTop 和 scrollLeft 可以获取和设置滚动距离
resize	window 事件，窗口尺寸发生改变时运行的事件，监听的是视口尺寸
contextmenu	右键菜单事件
cut	剪切
copy	复制事件
paste	粘贴事件

事件委托

事件委托：通过给祖先元素注册事件，利用事件的冒泡传播机制，在程序处理程序中判断事件源进行不同的处理；

当前元素的某个事件行为触发，那么其祖先元素的相关事件行为都会被触发；

<ul id=ul>
    <li id='li1'>1</li>
    <li id='li2'>2</li>
</ul>
<script>
// 事件委托，给父元素 ul 绑定单击事件
ul.onclick = function (e) {
    // target属性 返回触发此事件的元素（事件的目标节点）
    // nodeName 属性 返回指定节点的节点名称(返回的标签名是大写)
    if (e.target.nodeName == 'LI') {
        console.log(e.target.innerHTML);
    }
}
</script>

打赏作者

您的打赏是我前进的动力

微信

支付宝

剑指 Offer 26.树的子结构

第 3️⃣ 座大山：h4 拖拽

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 事件流
2. 事件注册
3. 事件处理函数
4. 事件对象
1. 4.1. 获取事件对象
2. 4.2. 事件对象的通用成员
5. 鼠标事件
1. 5.1. 事件类型
2. 5.2. 事件对象
6. 键盘事件
1. 6.1. 事件类型
2. 6.2. 事件对象
7. 表单事件
8. 其他事件
9. 事件委托