全部学科

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

通用技术

redis git docker nginx mysql zookeeper rabbitmq

Web前端

TypeScript vue CSS HTML javascript npm pinia vite

GO后端

golang gorm gin

Python全栈

NodeJS全栈

📝 1 篇文章 20 道配套习题

JS DOM操作与事件

专题说明

本专题系统讲解JavaScript DOM操作与事件处理的核心知识，涵盖元素选择、节点增删改、样式操作、事件监听与处理、事件传播机制、事件委托等实用技能。

学习目标

掌握DOM选择器的使用方法
理解DOM节点的创建、插入、删除、替换操作
学会通过JavaScript操作元素样式
掌握事件监听的添加与移除
理解事件对象及其常用属性
掌握事件冒泡与捕获机制
学会使用事件委托优化事件处理

学习内容

本专题涵盖以下核心知识点：

DOM选择器：querySelector、querySelectorAll、getElementById、getElementsByClassName等
DOM节点操作：createElement、appendChild、insertBefore、removeChild、cloneNode等
DOM样式操作：style属性、className、classList、getComputedStyle等
事件监听：addEventListener、removeEventListener、事件绑定方式对比
事件对象：target、currentTarget、preventDefault、stopPropagation等
常见事件类型：click、input、change、keydown、keyup、focus、blur等
事件冒泡与捕获：事件传播三阶段、eventPhase、阻止传播
事件委托：委托原理、适用场景、实现方式

学习建议

先掌握DOM选择器，理解不同方法的返回类型差异
重点练习节点操作方法，注意参数顺序
区分style内联样式与getComputedStyle计算样式
理解target与currentTarget的区别，这是事件委托的关键
掌握事件传播机制，理解stopPropagation与preventDefault的作用
实践事件委托，优化动态元素的事件处理

📝 配套习题（20 题）

💡 参考答案在文末

判断题

1

element.classList.add('new-class') 会为元素添加一个新类名，不会覆盖已有的类名。

A

对

B

错

2

事件委托的优势之一是可以自动处理后续动态添加的子元素，无需重新绑定事件。

A

对

B

错

3

所有 DOM 事件都会经历捕获和冒泡两个阶段。

A

对

B

错

4

element.remove() 方法可以直接将元素从 DOM 中移除，不需要通过父元素操作。

A

对

B

错

5

keydown 事件在按键被按下时触发，keyup 事件在按键被释放时触发。

A

对

B

错

单选题

6

DOM 事件传播的三个阶段顺序是？

A

冒泡阶段 → 目标阶段 → 捕获阶段

B

捕获阶段 → 目标阶段 → 冒泡阶段

C

目标阶段 → 捕获阶段 → 冒泡阶段

D

捕获阶段 → 冒泡阶段 → 目标阶段

7

事件委托（Event Delegation）的核心原理是什么？

A

在每个子元素上单独绑定事件

B

利用事件冒泡，在父元素上统一处理子元素的事件

C

使用捕获阶段监听事件

D

通过克隆节点传递事件

8

要通过 JavaScript 设置元素的内联样式 color 为 red，正确的写法是？

A

element.style.color = 'red'

B

element.color = 'red'

C

element.styles.color = 'red'

D

element.setAttribute('color', 'red')

9

事件对象的 target 属性和 currentTarget 属性有什么区别？

A

target 是绑定事件的元素，currentTarget 是触发事件的元素

B

target 是触发事件的元素，currentTarget 是绑定事件的元素

C

target 和 currentTarget 始终相同

D

target 是父元素，currentTarget 是子元素

10

以下哪个方法可以阻止表单的默认提交行为？

A

event.stopPropagation()

B

event.preventDefault()

C

event.stopImmediatePropagation()

D

event.cancelBubble = true

11

以下哪个方法可以获取页面中第一个 class 为 "active" 的元素？

A

document.getElementsByClassName('active')

B

document.querySelector('.active')

C

document.querySelectorAll('.active')

D

document.getElementById('active')

12

以下哪个方法用于创建一个新的 DOM 元素节点？

A

document.createElement()

B

document.appendChild()

C

document.cloneNode()

D

document.createTextNode()

13

以下哪种方式可以为按钮添加 click 事件监听器？

A

button.onClick = handleClick

B

button.addEventListener('click', handleClick)

C

button.addEvent('click', handleClick)

D

button.click = handleClick

14

document.querySelectorAll('div.box') 返回的结果类型是什么？

A

HTMLElement

B

HTMLCollection

C

NodeList

D

Array

15

要将元素 newNode 插入到 parent 元素的 referenceNode 之前，正确的调用方式是？

A

parent.insertBefore(referenceNode, newNode)

B

parent.insertBefore(newNode, referenceNode)

C

parent.insertBefore(newNode, before: referenceNode)

D

referenceNode.insertBefore(newNode)

16

event.stopImmediatePropagation() 与 event.stopPropagation() 的区别是什么？

A

前者阻止冒泡，后者阻止默认行为

B

前者阻止冒泡和同元素其他监听器，后者只阻止冒泡

C

前者只阻止同元素其他监听器，后者阻止冒泡

D

两者功能完全相同

17

要获取元素经过 CSS 计算后的最终样式值（包括继承的样式），应使用哪个方法？

A

element.style.backgroundColor

B

element.getAttribute('style')

C

window.getComputedStyle(element)

D

element.computedStyle

多选题

18

鼠标事件对象中，以下哪些属性可以获取鼠标位置信息？

A

clientX / clientY

B

pageX / pageY

C

offsetX / offsetY

D

screenX / screenY

19

同一元素上绑定了多个相同事件的监听器，以下说法正确的是？

A

按绑定顺序依次执行

B

可以通过 stopImmediatePropagation 阻止后续监听器

C

后绑定的监听器会覆盖先绑定的

D

使用 addEventListener 可以绑定多个不冲突的监听器

填空题

20

使用事件委托时，判断点击的是列表项 <li> 元素的代码是：if (____________.tagName === ____________) 或使用 matches 方法：if (____________.matches('li'))。

参考答案

1.正确 2.正确 3.错误 4.正确 5.正确 6.B 7.B 8.A 9.B 10.B 11.B 12.A 13.addEventListener 是标准的事件监听方法，第一个参数是事件类型（不带 on），第二个参数是事件处理函数。onclick（小写）是传统的事件属性绑定方式。 14.C 15.B 16.B 17.C 18.A;B;C;D 19.A;B;D 20.event.target;'LI';event.target

想在手机上练习这套专题？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码