介绍
在《古兰经》中,我们讨论了《古兰经》中的《古兰经》和《古兰经》中的《古兰经》以及《古兰经》中的《古兰经》和《古兰经》中的《古兰经》。
虽然我们现在可以对DOM做出几乎任何我们想要的改变,但从用户的角度来看,这并不太有用,因为我们只有手动触发更改。
事件是浏览器中可能由用户或浏览器本身启动的行动,以下是网站上可能发生的一些常见事件的例子:
- 页面完成加载
- 用户点击按钮
- 用户在下载
- 用户提交表单
- 用户在键盘上按下键盘
通过编码在事件中执行的JavaScript响应,开发人员可以向用户显示消息,验证数据,对按钮点击做出反应,以及许多其他操作。
在本文中,我们将讨论事件处理器、事件倾听器和事件对象,我们还将讨论如何编写代码来处理事件,以及一些最常见的事件。
事件处理者和事件倾听者
当用户点击按钮或按下键时,会启动一个事件,分别称为点击事件或键盘事件。
事件处理器是一个JavaScript函数,在事件发生时运行。
事件倾听器将响应式接口附加到一个元素中,允许该元素等待并倾听
给定的事件。
有三种方式将事件分配给元素:
- 在线事件处理器
- 事件处理器属性
- 事件收听器
我们将讨论这三种方法,以确保您熟悉每个事件可以触发的方式,然后讨论每个方法的优点和缺点。
内线事件处理器属性
要开始了解事件处理器,我们首先将考虑到 inline 事件处理器. 让我们从一个非常基本的例子开始,该例子由一个按钮
元素和一个p
元素组成。
让我们从一个HTML页面开始,体内有一个按钮,我们会引用一个JavaScript文件,我们会稍微添加代码。
1[label events.html]
2<!DOCTYPE html>
3<html lang="en-US">
4
5<head>
6 <title>Events</title>
7</head>
8
9<body>
10
11 <!-- Add button -->
12 <button>Click me</button>
13
14 <p>Try to change me.</p>
15
16</body>
17
18<!-- Reference JavaScript file -->
19<script src="js/events.js"></script>
20
21</html>
直接在按钮
上,我们会添加一个名为onclick
的属性,属性值将是我们创建的名为changeText()
的函数。
1[label events.html]
2<!DOCTYPE html>
3<html lang="en-US">
4
5<head>
6 <title>Events</title>
7</head>
8
9<body>
10
11 <button onclick="changeText()">Click me</button>
12
13 <p>Try to change me.</p>
14
15</body>
16
17<script src="js/events.js"></script>
18
19</html>
让我们创建我们的events.js
文件,我们把它放在js/
目录中,在里面我们会创建changeText()
函数,这将修改p
元素的textContent
。
1[label js/events.js]
2// Function to modify the text content of the paragraph
3const changeText = () => {
4 const p = document.querySelector('p');
5
6 p.textContent = "I changed because of an inline event handler.";
7}
当你第一次加载 events.html
时,你会看到一个看起来像这样的页面:
但是,当您或其他用户点击按钮时,p
标签的文本将从尝试更改我
更改为我因内线事件处理器而更改
:
内线事件处理器是一个简单的方法来开始了解事件,但它们通常不应该被用于测试和教育目的。
您可以将线性事件处理器与 HTML 元素上的线性 CSS 风格进行比较,保持单独的类风格表比在每个元素上创建线性风格更实用,正如维护完全通过单独的脚本文件处理的 JavaScript 更可行,而不是为每个元素添加处理器。
事件处理者财产
在线事件处理器的下一步是 **事件处理器属性 ** 这与线事件处理器非常相似,除非我们在JavaScript中设置一个元素的属性,而不是HTML中的属性。
设置将是相同的,除非我们不再在标记中包含 `onclick="changeText()" :
1[label events.html]
2...
3<body>
4
5 <button>Click me</button>
6
7 <p>I will change.</p>
8
9</body>
10...
我们的功能也将保持类似,除非现在我们需要访问JavaScript中的按钮
元素,我们可以简单地访问onclick
,就像我们访问风格
或id
或任何其他元素属性一样,然后分配函数引用。
1[label js/events.js]
2// Function to modify the text content of the paragraph
3const changeText = () => {
4 const p = document.querySelector('p');
5
6 p.textContent = "I changed because of an event handler property.";
7}
8
9// Add event handler as a property of the button element
10const button = document.querySelector('button');
11button.onclick = changeText;
<$>[注] **注:**事件处理器不遵循大多数JavaScript代码遵循的 camelCase公约。
当您第一次加载页面时,浏览器将显示以下内容:
现在,当你点击按钮时,它将具有类似以前的效果:
请注意,当我们将函数引用到Onclick
属性时,我们不会包括关节,因为我们在该时刻不引用函数,而只是将引用传递给它。
事件处理器的属性比内线处理器更易维护,但它仍然会遭受一些相同的障碍,例如,试图设置多个单独的点击
属性会导致除了最后一个以外的所有属性被重写,如下所示。
1[label js/events.js]
2const p = document.querySelector('p');
3const button = document.querySelector('button');
4
5const changeText = () => {
6 p.textContent = "Will I change?";
7}
8
9const alertText = () => {
10 alert('Will I alert?');
11}
12
13// Events can be overwritten
14button.onclick = changeText;
15button.onclick = alertText;
在上面的示例中,按一下按钮
只会显示警告,而不会更改p
文本,因为alert()
代码是最后一个添加到属性。
有了对内线事件处理器和事件处理器属性的理解,让我们转向事件听器。
活动听众
JavaScript 事件处理器的最新添加是事件聆听器. 一个 ** 事件聆听器** 会监视一个元素上的事件. 而不是将该事件直接分配给元素上的属性,我们将使用 addEventListener()
方法来聆听该事件。
addEventListener()
需要两个强制参数 - 该事件正在收听,并收听者回复函数。
我们的事件倾听器的HTML将与上一个示例相同。
1[label events.html]
2...
3 <button>Click me</button>
4
5 <p>I will change.</p>
6...
我们将继续使用与以前相同的 changeText()
函数. 我们将附加 addEventListener()
方法到按钮。
1[label js/events.js]
2// Function to modify the text content of the paragraph
3const changeText = () => {
4 const p = document.querySelector('p');
5
6 p.textContent = "I changed because of an event listener.";
7}
8
9// Listen for click event
10const button = document.querySelector('button');
11button.addEventListener('click', changeText);
请注意,在前两种方法中,点击事件被称为onclick
,但在事件听众中,它被称为click
。
当您使用上面的JavaScript代码重新加载页面时,您将收到以下输出:
乍一看,事件聆听器看起来与事件处理器属性非常相似,但它们有几个优点. 我们可以将多个事件聆听器设置为相同的元素,如下面的示例所示。
1[label js/events.js]
2const p = document.querySelector('p');
3const button = document.querySelector('button');
4
5const changeText = () => {
6 p.textContent = "Will I change?";
7}
8
9const alertText = () => {
10 alert('Will I alert?');
11}
12
13// Multiple listeners can be added to the same event and element
14button.addEventListener('click', changeText);
15button.addEventListener('click', alertText);
在本示例中,这两种事件都将启动,在单击警报后向用户提供警报和修改文本。
通常,匿名函数会被用来代替在事件收听器上的函数引用,匿名函数是未命名的函数。
1// An anonymous function on an event listener
2button.addEventListener('click', () => {
3 p.textContent = "Will I change?";
4});
还可以使用removeEventListener()
函数从一个元素中删除一个或所有事件。
1// Remove alert function from button element
2button.removeEventListener('click', alertText);
此外,您可以在文档
和窗口
对象上使用addEventListener()
。
事件聆听器目前是处理 JavaScript 中的事件的最常见和最受欢迎的方式。
共同事件
我们已经了解了使用点击事件的内线事件处理器、事件处理器属性和事件聆听器,但在JavaScript中还有更多事件。
鼠标事件
鼠标事件是最常用的事件之一. 它们是指涉及点击鼠标按钮或旋转和移动鼠标指针的事件。
Event | Description |
---|---|
click | Fires when the mouse is pressed and released on an element |
dblclick | Fires when an element is clicked twice |
mouseenter | Fires when a pointer enters an element |
mouseleave | Fires when a pointer leaves an element |
mousemove | Fires every time a pointer moves inside an element |
一个点击
是一个组合事件,由组合的鼠标下载
和鼠标下载
事件组成,当鼠标按钮按下或举起时,分别发生。
使用mouseenter
和mouseave
在并行中重现了持续的旋转效果,只要鼠标指针在元素上。
形式事件
表单事件是与表单有关的操作,例如选择或未选择的输入
元素,以及提交的表单。
Event | Description |
---|---|
submit | Fires when a form is submitted |
focus | Fires when an element (such as an input) receives focus |
blur | Fires when an element loses focus |
Focus 是当一个元素被选择时实现的,例如通过鼠标点击或通过TAB
键导航。
JavaScript 通常用于提交表单并将值发送到后端语言. 使用 JavaScript 发送表单的优点是,它不需要页面重新加载来提交表单,并且 JavaScript 可以用来验证所需的输入字段。
键盘事件
键盘事件用于处理键盘操作,例如按下键,举起键,并握住键。
Event | Description |
---|---|
keydown | Fires once when a key is pressed |
keyup | Fires once when a key is released |
keypress | Fires continuously while a key is pressed |
虽然它们看起来很相似,但开关
和开关
事件不会访问所有相同的密钥,而开关
会识别按下的每个密钥,但开关
会忽略不产生字符的密钥,例如SHIFT
,ALT
或DELETE
。
键盘事件具有访问单个键的特定属性。
如果一个被称为事件
对象的参数被传递给事件倾听器,我们可以访问有关所发生的操作的更多信息。
例如,如果用户在键盘上按下字母a
键,将出现与该键相关的下列属性:
Property | Description | Example |
---|---|---|
key | Represents the character name | a |
code | Represents the physical key being pressed | KeyA |
为了展示如何通过JavaScript控制台收集这些信息,我们可以写下面的代码行。
1// Test the key and code properties
2document.addEventListener('keydown', event => {
3 console.log('key: ' + event.key);
4 console.log('code: ' + event.code);
5});
一旦我们在控制台上按下ENTER
,我们现在可以在键盘上按下一个键,在这个例子中,我们将按下a
。
1[secondary_label Output]
2key: a
3code: KeyA
钥匙
属性是字符的名称,可以改变 - 例如,按a
和SHIFT
会导致A
的钥匙
。
要了解更多信息,您可以查看 Mozilla 开发者网络上的完整事件列表。
事件对象
除了通用事件
对象外,每个事件类型都有自己的扩展,例如KeyboardEvent
和MouseEvent
。
该事件
对象通过一个倾听器函数作为参数传递,通常被写成事件
或e
。我们可以访问密码
事件的代码
属性来复制PC游戏的键盘控制。
要尝试,创建一个具有<p>
标签的基本HTML文件并将其加载到浏览器中。
1[label event-test-p.html]
2<!DOCTYPE html>
3<html lang="en-US">
4<head>
5 <title>Events</title>
6</head>
7<body>
8
9 <p></p>
10
11</body>
12</html>
然后,在您的浏览器的 开发者控制台中输入以下JavaScript代码。
1// Pass an event through to a listener
2document.addEventListener('keydown', event => {
3 var element = document.querySelector('p');
4
5 // Set variables for keydown codes
6 var a = 'KeyA';
7 var s = 'KeyS';
8 var d = 'KeyD';
9 var w = 'KeyW';
10
11 // Set a direction for each code
12 switch (event.code) {
13 case a:
14 element.textContent = 'Left';
15 break;
16 case s:
17 element.textContent = 'Down';
18 break;
19 case d:
20 element.textContent = 'Right';
21 break;
22 case w:
23 element.textContent = 'Up';
24 break;
25 }
26});
当你按下一个键(a
,s
,d
或w
)时,你会看到类似于以下的输出:
从这里开始,您可以继续开发浏览器将如何响应和用户按住这些键,并可以创建一个更动态的网站。
接下来,我们将讨论最常用的事件属性之一:目标
属性. 在下面的示例中,我们有一个部分
内的三个div
元素。
1[label event-test-div.html]
2<!DOCTYPE html>
3<html lang="en-US">
4<head>
5 <title>Events</title>
6</head>
7<body>
8
9 <section>
10 <div id="one">One</div>
11 <div id="two">Two</div>
12 <div id="three">Three</div>
13 </section>
14
15</body>
16</html>
通过在我们的浏览器的开发者控制台中使用event.target
和JavaScript,我们可以将一个事件倾听器放置在外部部分
元素上,并获得最深入的元素。
1const section = document.querySelector('section');
2
3// Print the selected target
4section.addEventListener('click', event => {
5 console.log(event.target);
6});
点击其中任何一个元素将返回相关特定元素的输出到控制台中使用event.target
,这是非常有用的,因为它允许您只放置一个事件倾听器,可以用来访问许多嵌入的元素。
使用事件
对象,我们可以设置与所有事件相关的响应,包括通用事件和更具体的扩展。
结论
事件是网站上发生的行动,如点击、浮动、提交表单、加载页面或按键键。
在本教程中,我们了解了事件是什么,常见事件的例子,事件处理器和事件聆听器之间的区别,以及如何访问事件
对象。