副队长JavaScript教程(57)-DOM事件机制

点此查看 所有教程、项目、源码导航

文章目录

[1. 背景](#1. 背景)
[2. 什么是 DOM 事件](#2. 什么是 DOM 事件)
[3. 事件三要素](#3. 事件三要素)
[4. 两种事件绑定方式](#4. 两种事件绑定方式)
- [4.1 行内绑定（写在 HTML 标签上）](#4.1 行内绑定（写在 HTML 标签上）)
- [4.2 DOM 属性绑定（推荐）](#4.2 DOM 属性绑定（推荐）)
[5. 事件对象 event](#5. 事件对象 event)
[6. 事件冒泡（重点）](#6. 事件冒泡（重点）)
[7. 常用鼠标事件](#7. 常用鼠标事件)
- [7.1 onclick 鼠标点击](#7.1 onclick 鼠标点击)
- [7.2 onmouseover 鼠标移入](#7.2 onmouseover 鼠标移入)
- [7.3 onmouseout 鼠标移出](#7.3 onmouseout 鼠标移出)
- [7.4 onmousemove 鼠标移动](#7.4 onmousemove 鼠标移动)
- [7.5 onmousedown / onmouseup](#7.5 onmousedown / onmouseup)
[8. 常用键盘事件](#8. 常用键盘事件)
- [8.1 onkeydown 键盘按下](#8.1 onkeydown 键盘按下)
- [8.2 onkeyup 键盘松开](#8.2 onkeyup 键盘松开)
- [8.3 onkeypress 字符按键](#8.3 onkeypress 字符按键)
- [8.4 keyCode 判断具体按键](#8.4 keyCode 判断具体按键)
[9. 焦点事件（表单高频使用）](#9. 焦点事件（表单高频使用）)
[10. 小结](#10. 小结)

1. 背景

前面我们学习了 DOM 的各种操作，可以获取、修改页面元素、表单内容。

但是此时的网页还比较 "死板"，只能写死内容，不能响应用户操作。

想要实现网页交互，就需要学习 DOM 事件。用户点击鼠标、敲击键盘、移入移出元素，这些动作都可以触发 JS 代码执行。

本篇我们先搞懂事件的基础机制，再学习开发里最常用的鼠标、键盘、焦点事件。

2. 什么是 DOM 事件

简单来说，事件就是用户或者浏览器触发的动作 。

网页等待用户操作，当动作发生，自动执行我们预先写好的 JS 代码，这套交互机制就是事件。

常见动作举例：

鼠标点击、移入、移出
键盘按下、松开
输入框获得焦点、失去焦点

3. 事件三要素

每一个事件，都由三部分组成，称为事件三要素：

事件源：触发事件的 DOM 元素（按钮、div、输入框等）
事件类型：是什么动作，比如点击、鼠标移入
事件处理程序：事件触发之后执行的 JS 代码，一般写成函数

示例：

html 复制代码

<button id="btn">点击我</button>

js 复制代码

var btn = document.querySelector("#btn");
btn.onclick = function() {
    alert("按钮被点击了");
}

效果：

解析：

事件源是 btn 按钮，事件类型是 onclick 点击事件，大括号里面的代码就是事件处理程序。

4. 两种事件绑定方式

4.1 行内绑定（写在 HTML 标签上）

直接在标签里面写事件属性，属性值为函数调用。

html 复制代码

<button onclick="sayHello()">点我</button>

js 复制代码

function sayHello() {
    alert("hello");
}

重点说明：

HTML 结构和 JS 代码混在一起，不利于后期维护；
适合简单测试，正式项目不推荐大量使用。

4.2 DOM 属性绑定（推荐）

先用 querySelector 拿到元素，再给元素的事件属性赋值函数。

html 复制代码

<button id="btn">点击我</button>

js 复制代码

var btn = document.querySelector("#btn");
btn.onclick = function() {
    alert("点击触发");
}

重点说明：

HTML 结构和 JS 代码分离，可读性更好；
同一个事件多次赋值，后面的会覆盖前面，只能绑定一个处理函数。

5. 事件对象 event

事件触发的时候，浏览器会自动生成一个事件对象，里面存放本次事件的全部信息。

我们在函数形参接收这个对象，一般命名为 e 或者 event。

html 复制代码

<button id="btn">点击</button>

js 复制代码

var btn = document.querySelector("#btn");
btn.onclick = function(e) {
    console.log(e);
    // e.target 代表真正触发事件的元素
    console.log(e.target);
}

点击后输出：

重点说明：

事件对象包含鼠标坐标、触发元素、按键信息等；
e.target 是非常常用的属性，用来拿到真正触发事件的元素。

6. 事件冒泡（重点）

事件冒泡是 DOM 事件的核心机制。

当子元素触发事件，这个事件会一层一层向上传递，一直传到最外层 html 根元素。

示例 HTML：

html 复制代码

<div id="box1">外层盒子
    <div id="box2">内层盒子</div>
</div>

css 复制代码

var box1 = document.querySelector("#box1");
var box2 = document.querySelector("#box2");

box1.onclick = function() {
    alert("外层盒子被点击");
}
box2.onclick = function() {
    alert("内层盒子被点击");
}

现象：

点击内层盒子，会先弹出内层提示，再弹出外层提示，事件从内向外冒泡。

阻止冒泡写法：

css 复制代码

box2.onclick = function(e) {
    alert("内层盒子被点击");
    e.stopPropagation(); // 阻止事件继续向上冒泡
}

重点说明：

冒泡默认开启；
很多场景需要阻止冒泡，避免父元素事件被意外触发。

7. 常用鼠标事件

鼠标事件，就是鼠标对页面元素操作时触发的事件。

7.1 onclick 鼠标点击

鼠标按下并且松开，完成一次单击才触发。

html 复制代码

<button id="btn">点我</button>

js 复制代码

var btn = document.querySelector("#btn");
btn.onclick = function () {
    alert("按钮被点击了");
}

重点说明：按下不松手不会触发，是开发最常用的鼠标事件。

7.2 onmouseover 鼠标移入

鼠标移动进入元素范围时触发。

html 复制代码

<div id="box" style="width:150px;height:150px;background:skyblue;">盒子</div>

js 复制代码

var box = document.querySelector("#box");
box.onmouseover = function () {
    this.style.backgroundColor = "orange";
}

7.3 onmouseout 鼠标移出

鼠标从元素内部移出去时触发，一般和 onmouseover 成对使用。

js 复制代码

box.onmouseout = function () {
    this.style.backgroundColor = "skyblue";
}

重点说明：事件函数里面的 this，代表绑定这个事件的元素（事件源）。

7.4 onmousemove 鼠标移动

鼠标在元素内部移动时持续触发，触发频率很高。

js 复制代码

box.onmousemove = function () {
    console.log("鼠标在盒子里面移动");
}

重点说明：不要在里面写复杂代码，容易造成页面卡顿。

7.5 onmousedown / onmouseup

onmousedown：鼠标按键按下一瞬间触发，不需要松开
onmouseup：鼠标按键松开一瞬间触发

js 复制代码

box.onmousedown = function () {
    console.log("鼠标按下");
}
box.onmouseup = function () {
    console.log("鼠标松开");
}

8. 常用键盘事件

键盘事件是敲击键盘时触发，一般绑定给输入框，或者绑定到 document 监听整个页面。

触发顺序：onkeydown → onkeypress → onkeyup

8.1 onkeydown 键盘按下

按下任意按键就触发，回车、空格、shift、ctrl 等功能键都可以触发。

html 复制代码

<input type="text" id="inp">

js 复制代码

var inp = document.querySelector("#inp");
inp.onkeydown = function (e) {
    console.log("按下按键，按键编码：", e.keyCode);
}

分别按下空格、回车，效果如下：

32和13分别是空格、回车对应的keyCode，也就是标识数字

8.2 onkeyup 键盘松开

手指松开按键的时候触发。

js 复制代码

inp.onkeyup = function (e) {
    console.log("按键松开");
}

8.3 onkeypress 字符按键

只对字母、数字、符号这类可输入字符生效；shift、ctrl、方向键等功能键不会触发。

提示：现代开发中 keypress 使用较少，了解即可。

8.4 keyCode 判断具体按键

事件对象 e.keyCode 可以拿到按键数字编码，常用编码：

回车：13
空格：32
上方向键：38，下方向键：40，左方向键：37，右方向键：39

示例：输入框回车提交

js 复制代码

inp.onkeyup = function (e) {
    if (e.keyCode === 13) {
        alert("你按下了回车键，提交内容");
    }
}

重点说明：

绑定到输入框时，只有输入框处于激活（聚焦）状态才会触发；
如果监听整个页面键盘，直接绑定 document.onkeydown。

9. 焦点事件（表单高频使用）

焦点事件经常和表单输入框搭配使用。

onfocus：元素获得焦点（点击输入框，可以输入内容）
onblur：元素失去焦点（点击输入框外面）

js 复制代码

inp.onfocus = function () {
    console.log("输入框获得焦点");
}
inp.onblur = function () {
    console.log("输入框失去焦点，可以在这里做表单验证");
}

10. 小结

事件三要素：事件源、事件类型、事件处理程序；
两种绑定方式：行内绑定、DOM 属性绑定，推荐 DOM 属性绑定；
事件对象 e，可以拿到本次事件信息，e.target 获取触发元素；
事件冒泡：子元素事件向上传递给父元素，e.stopPropagation() 阻止冒泡；
鼠标事件：onclick、onmouseover、onmouseout、onmousemove、onmousedown、onmouseup；
键盘事件：onkeydown、onkeyup、onkeypress，通过 keyCode 识别按键；
焦点事件 onfocus、onblur，适合表单验证；
事件函数内 this 代表绑定事件的元素。