了解 JavaScript 中的事件

介绍

在《古兰经》中,我们讨论了《古兰经》中的《古兰经》和《古兰经》中的《古兰经》以及《古兰经》中的《古兰经》和《古兰经》中的《古兰经》。

虽然我们现在可以对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 时,你会看到一个看起来像这样的页面:

First rendering of events.html

但是,当您或其他用户点击按钮时,p标签的文本将从尝试更改我更改为我因内线事件处理器而更改:

First response to event on events.html rendering

内线事件处理器是一个简单的方法来开始了解事件,但它们通常不应该被用于测试和教育目的。

您可以将线性事件处理器与 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公约。

当您第一次加载页面时,浏览器将显示以下内容:

Initial load of events.html with events handler

现在,当你点击按钮时,它将具有类似以前的效果:

Response with events handler of events.html

请注意,当我们将函数引用到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()代码是最后一个添加到属性。

Final response via events handler of events.html

有了对内线事件处理器和事件处理器属性的理解,让我们转向事件听器。

活动听众

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代码重新加载页面时,您将收到以下输出:

Event listener response of events.html

乍一看,事件聆听器看起来与事件处理器属性非常相似,但它们有几个优点. 我们可以将多个事件聆听器设置为相同的元素,如下面的示例所示。

 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中还有更多事件。

鼠标事件

鼠标事件是最常用的事件之一. 它们是指涉及点击鼠标按钮或旋转和移动鼠标指针的事件。

EventDescription
clickFires when the mouse is pressed and released on an element
dblclickFires when an element is clicked twice
mouseenterFires when a pointer enters an element
mouseleaveFires when a pointer leaves an element
mousemoveFires every time a pointer moves inside an element

一个点击是一个组合事件,由组合的鼠标下载和鼠标下载事件组成,当鼠标按钮按下或举起时,分别发生。

使用mouseenter和mouseave在并行中重现了持续的旋转效果,只要鼠标指针在元素上。

形式事件

表单事件是与表单有关的操作,例如选择或未选择的输入元素,以及提交的表单。

EventDescription
submitFires when a form is submitted
focusFires when an element (such as an input) receives focus
blurFires when an element loses focus

Focus 是当一个元素被选择时实现的,例如通过鼠标点击或通过TAB键导航。

JavaScript 通常用于提交表单并将值发送到后端语言. 使用 JavaScript 发送表单的优点是,它不需要页面重新加载来提交表单,并且 JavaScript 可以用来验证所需的输入字段。

键盘事件

键盘事件用于处理键盘操作,例如按下键,举起键,并握住键。

EventDescription
keydownFires once when a key is pressed
keyupFires once when a key is released
keypressFires continuously while a key is pressed

虽然它们看起来很相似,但开关和开关事件不会访问所有相同的密钥,而开关会识别按下的每个密钥,但开关会忽略不产生字符的密钥,例如SHIFT,ALT或DELETE。

键盘事件具有访问单个键的特定属性。

如果一个被称为事件对象的参数被传递给事件倾听器,我们可以访问有关所发生的操作的更多信息。

例如,如果用户在键盘上按下字母a键,将出现与该键相关的下列属性:

PropertyDescriptionExample
keyRepresents the character namea
codeRepresents the physical key being pressedKeyA

为了展示如何通过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)时,你会看到类似于以下的输出:

First event object example

从这里开始,您可以继续开发浏览器将如何响应和用户按住这些键,并可以创建一个更动态的网站。

接下来,我们将讨论最常用的事件属性之一:目标属性. 在下面的示例中,我们有一个部分内的三个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,这是非常有用的,因为它允许您只放置一个事件倾听器,可以用来访问许多嵌入的元素。

Second event object example

使用事件对象,我们可以设置与所有事件相关的响应,包括通用事件和更具体的扩展。

结论

事件是网站上发生的行动,如点击、浮动、提交表单、加载页面或按键键。

在本教程中,我们了解了事件是什么,常见事件的例子,事件处理器和事件聆听器之间的区别,以及如何访问事件对象。

Published At
Categories with 技术
Tagged with
comments powered by Disqus