监听和处理事件
在介绍如何修改或创建 DOM 之前,我们先简单的学习一下 DOM 事件的处理,因为绝大多数情况下,需要在用户交互的时候修改 DOM,例如用户点击按钮修改某个元素的颜色,或者添加一个新的列表项到列表中。
处理事件共分两步:
- 添加事件监听函数。
- 在监听函数中编写处理代码。
监听事件的方式
监听事件的方式有 3 种:
- 直接在 HTML 中通过事件属性监听,例如
onclick
。 - 在 JS 中,直接给 DOM 元素的事件属性,添加监听函数。
- 在 JS 中,调用 DOM 元素的 addEventListener() 方法。我们分别来看一下。
这小节我们会看一下 click 鼠标点击事件的监听和处理方法,更多的事件会在后面小节中再做介绍。
直接在 HTML 中监听事件
这种方式已经不推荐了,它会使 HTML 和 JavaScript 代码紧密耦合,并且让 HTML 代码难以阅读。鉴于有些工作中,可能还是会有这种 写法,所以这里介绍一下这种监听和处理事件的方法。
我们以监听 click 鼠标点击事件为例,假设页面上展示了一个 p 元素,文字默认为黑色,在鼠标点击的时候,变成红色。我们可以:
- 给 p 元素设置
onclick
属性,然后值为调用 JavaScript 中的一个函数,例如 changeColor - 给函数传递 this 进去,这样 p 元素的 DOM 实例就可以通过函数参数访问到。
- 在 changeColor 函数中,我们可以修改 p 元素的 style 属性的 color 的值,来改变它的颜色。
这里具体的事件处理代码先不用关心,知道监听和处理事件的大体过程就可以了。
代码如下(可直接在预览处点击 p 元素试试效果):
<p id="text" onclick="changeColor(this)">这是一个段落</p>
<script>
function changeColor(p) {
p.style.color = "red";
}
</script>
预览:
这样,点击 p 元素的时候,就会触发 click 事件,然后调用 changeColor() 函数,执行里边的代码。
或者如果事件监听只有少量的代码,例如上面的例子只有 1 行,那么也可以直接吧它写到 HTML 中,不用单独定义一个函数:
<p id="text" onclick="this.style.color = 'red'">这是一个段落</p>
预览:
这样也是同样的效果。
在 JavaScript 中监听事件
我们也可以在 JavaScript 中获取到 DOM 元素实例之后,给它的事件属性赋值一个函数,来监听事件,例如:
<p id="text">这是一个段落</p>
<script>
const p = document.getElementById("text");
p.onclick = function(e) {
e.target.style.color = 'red'
}
</script>
预览:
这样也能实现同样的效果。这里注意,通过这种方式注册的事件监听函数,可以接收 事件对象
作为参数,它包含事件触发时的一些信息,例如鼠标的坐标,触发事件的元素等。这里我们通过 e.target
来访问事件触发的元素,也就是 p 元素,来修改它的样式。或者你也可以使用上方获取出来的 p
元素实例,它们两个是等价的。
使用 addEventListener()
这种方式是最推荐的监听事件的方式,调用 DOM 元素的 addEventListener() 方法:
- 第一个参数传递事件名,这里的参数名都不带 "on"。
- 第二个参数传递事件处理函数。
例如:
<p id="text">这是一个段落</p>
<script>
const p = document.getElementById("text");
p.addEventListener("click", function(e) {
e.target.style.color = 'red'
});
</script>
预览:
使用 addEventListener
的好处是,我们可以给元素添加多个事件监听/处理函数,并且可以给非 DOM 元素添加事件,例如 window
对象,这个我们后面再介绍。
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!
即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!
《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买