了解JavaScript中的事件

尽管在这一点上,我们现在可以对DOM所做的任何更改进行修改,但从用户角度来看,它并不是非常有用,因为我们只手动触发更改。通过了解事件,我们将了解如何将所有事情联系在一起以制作互动网站。

事件是在浏览器中发生的操作,可以由用户或浏览器本身启动。以下是一些可能发生在网站上的常见事件的例子:

  • 该页面完成加载
  • 用户点击一个按钮
  • 用户悬停在下拉列表中
  • 用户提交表单
  • 用户按下键盘上的按键

通过对事件执行的JavaScript响应进行编码,开发人员可以向用户显示消息,验证数据,响应按钮点击以及其他许多操作。

在本文中,我们将介绍事件处理程序,事件侦听器和事件对象。我们还将通过三种不同的方式编写代码来处理事件,以及一些最常见的事件。通过了解事件,您可以为最终用户提供更具互动性的网络体验。

事件处理程序和事件监听器

当用户点击一个按钮或按下某个键时,会触发一个事件。这些分别称为点击事件或按键事件。

一个事件处理程序是运行在一个事件触发JavaScript函数。

一个事件监听器将一个响应接口附加到一个元素上,该元素允许该特定元素等待并“侦听”给定事件触发。

有三种方法可以将事件分配给元素:

  • 内联事件处理程序
  • 事件处理器属性
  • 事件监听器

我们将通过三种方法来确保您熟悉事件触发的每种方式,然后讨论每种方法的优缺点。

内联事件处理程序属性

要开始了解事件处理程序,我们将首先考虑内联事件处理程序。让我们从一个非常基本的例子开始,它由一个button元素和一个p元素组成。我们希望用户单击button以更改文本内容p

我们从一个带有按钮的HTML页面开始。我们将引用一个JavaScript文件,我们稍后将添加代码。

events.html
<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Events</title>
</head>

<body>

  <!-- Add button -->
  <button>Click me</button>

  <p>Try to change me.</p>

</body>

<!-- Reference JavaScript file -->
<script src="js/events.js"></script>

</html>

直接在上面button,我们将添加一个叫做的属性onclick。属性值将是我们创建的函数调用的changeText()

events.html
<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Events</title>
</head>

<body>

    <button onclick="changeText()">Click me</button>

    <p>Try to change me.</p>

</body>

<script src="js/events.js"></script>

</html>

让我们创建我们的events.js文件,我们把它放在js/这里的目录中。在这,我们将创建changeText()功能,这将改变textContent了的p元素。

JS / events.js
// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an inline event handler.";
}

当你第一次加载时events.html,你会看到一个如下所示的页面:

首先渲染events.html

但是,当您或其他用户单击按钮时,p标签的文本将从以下位置Try to change me.变为I changed because of an inline event handler.

首先响应events.html渲染事件

内联事件处理程序是开始理解事件的直接方式,但它们通常不应超出测试和教育目的。

您可以比较内联事件处理程序以在HTML元素上嵌入CSS样式。维护一个单独的类样式表比在每个元素上创建内联样式要实用得多,正如维护完全通过单独的脚本文件处理JavaScript而不是为每个元素添加处理程序一样。

事件处理程序属性

内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常类似,只不过我们使用JavaScript设置元素的属性而不是HTML中的属性。

这里的设置是一样的,只是我们不再onclick="changeText()"在标记中包含:

events.html
...
<body>

    <button>Click me</button>

    <p>I will change.</p>

</body>
...

我们的功能也会保持相似,除了现在我们需要访问buttonJavaScript中的元素。我们可以简单地访问onclick,就像我们会访问styleid或任何其他元素属性,然后分配函数引用。

JS / events.js
// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;

注:事件处理程序不遵循大多数JavaScript代码遵循的camelCase约定。注意代码onclick不是onClick

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

events.html与事件处理程序的初始加载

现在当你点击这个按钮时,它会有和以前一样的效果:

events.html的事件处理程序响应

请注意,在将onclick属性的函数引用传递给函数时,我们不包含括号,因为我们在那一刻不调用函数,而只是传递对它的引用。

事件处理程序属性比内联处理程序稍微更易维护,但它仍然遭受一些相同的障碍。例如,试图设置多个不同的onclick属性会导致除最后一个以外的所有其他属性被覆盖,如下所示。

JS / events.js
const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

在上面的例子中,button点击只会显示一个提醒,并且不会更改p文本,因为alert()代码是最后一个添加到该属性的代码。

通过events.html的事件处理程序的最终响应

了解内联事件处理程序和事件处理程序属性后,让我们转到事件侦听器。

事件监听器

JavaScript事件处理程序的最新成员是事件侦听器。一个事件监听器手表的元件上的事件。我们将使用该addEventListener()方法来监听事件,而不是直接将事件分配给元素上的属性。

addEventListener() 需要两个必需的参数 – 要监听的事件和侦听器回调函数。

我们的事件监听器的HTML将和前面的例子一样。

events.html
...
    <button>Click me</button>

    <p>I will change.</p>
...

我们仍然会使用changeText()和以前一样的功能。我们将该addEventListener()方法附加到按钮上。

JS / events.js
// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);

请注意,前两种方法中,单击事件被称为onclick,但事件侦听器称为click。每个事件监听者都会on从这个单词中删除。在下一节中,我们将看到更多其他类型事件的例子。

当您使用上面的JavaScript代码重新加载页面时,您会收到以下输出:

events.html的事件监听器响应

首先看,事件监听器看起来与事件处理器属性非常相似,但它们有一些优点。我们可以在同一个元素上设置多个事件监听器,如下例所示。

JS / events.js
const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);

在这个例子中,两个事件都会触发,一旦点击了警报,就为用户提供了警报和修改后的文本。

通常,将使用匿名函数而不是事件侦听器的函数引用。匿名函数是没有命名的函数。

// An anonymous function on an event listener
button.addEventListener('click', () => {
    p.textContent = "Will I change?";
});

也可以使用该removeEventListener()功能从元素中删除一个或全部事件。

// Remove alert function from button element
button.removeEventListener('click', alertText);

此外,还可以使用addEventListener()documentwindow对象。

事件侦听器是当前处理JavaScript中事件的最常见和首选的方式。

常见事件

我们已经使用click事件了解了内联事件处理程序,事件处理程序属性和事件侦听器,但JavaScript中还有很多事件。我们将在下面介绍几个最常见的事件。

鼠标事件

鼠标事件是最常用的事件之一。它们是指涉及鼠标上的单击按钮或悬停和移动鼠标指针的事件。这些事件也对应于触摸设备上的等效操作。

事件 描述
click 当鼠标按下并释放元素时触发
dblclick 点击两次元素时触发
mouseenter 当指针进入元素时触发
mouseleave 当指针离开元素时触发
mousemove 每次指针在元素内移动时触发

click是由组合事件mousedownmouseup事件组成的复合事件,分别在按下或抬起鼠标按钮时触发。

使用mouseentermouseleave串联再现只要鼠标指针是在元件上,持续一悬停效果。

表单事件

表单事件是与表单相关的操作,例如input被选中或未选中的元素以及正在提交的表单。

事件 描述
submit 提交表单时触发
focus 当元素(如输入)获得焦点时触发
blur 元素失去焦点时触发

选择某个元素时可实现焦点,例如,通过鼠标单击或通过TAB键导航到该元素。

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

键盘事件

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

事件 描述
keydown 按下某个键时触发一次
keyup 当钥匙被释放时发射一次
keypress 按下键时持续闪光

虽然他们看起来很相似,keydownkeypress事件不会访问所有完全相同的钥匙。虽然keydown将确认每次按下此键,keypress就会忽略那些不产生字符键,例如SHIFTALTDELETE

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

如果将一个称为event对象的参数传递给事件侦听器,则可以访问有关发生的操作的更多信息。这涉及到键盘对象三个特性包括keyCodekey,和code

例如,如果用户按下a键盘上的字母键,则与该键有关的以下属性将显示:

属性 描述
keyCode 一个关键的数字 65
key 代表角色名称 一个
code 代表被按下的物理键 科亚

为了展示如何通过JavaScript控制台收集这些信息,我们可以编写以下几行代码。

// Test the keyCode, key, and code properties
document.addEventListener('keydown', event => {
    console.log('key: ' + event.keyCode);
    console.log('key: ' + event.key);
    console.log('code: ' + event.code);
});

一旦我们按下ENTER控制台,我们现在可以按下键盘上的一个键,在这个例子中,我们将按下a

Output
keyCode: 65
key: a
code: KeyA

keyCode属性是一个与已被按下的键相关的数字。该key属性是字符,它可以改变的名称-例如,按aSHIFT将导致keyA。该code属性表示键盘上的物理键。

请注意,keyCode正在弃用的过程中,最好code在新项目中使用。

要了解更多信息,您可以在Mozilla开发者网络上查看完整的事件列表

事件对象

Event对象由所有事件可以访问的属性和方法组成。除了通用Event对象之外,每种类型的事件都有自己的扩展名,例如KeyboardEventMouseEvent

Event对象作为参数传递给侦听器函数。它通常写为evente。我们可以访问事件的code属性keydown以复制PC游戏的键盘控件。

要试用它,请创建一个带有<p>标签的基本HTML文件并将其加载到浏览器中。

事件测试p.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Events</title>
</head>
<body>

  <p></p>

</body>
</html>

然后,在浏览器的开发者控制台中输入以下JavaScript代码。

// Pass an event through to a listener
document.addEventListener('keydown', event => {
    var element = document.querySelector('p');

    // Set variables for keydown codes
    var a = 'KeyA';
    var s = 'KeyS';
    var d = 'KeyD';
    var w = 'KeyW';

    // Set a direction for each code
    switch (event.code) {
        case a:
            element.textContent = 'Left';
            break;
        case s:
            element.textContent = 'Down';
            break;
        case d:
            element.textContent = 'Right';
            break;
        case w:
            element.textContent = 'Up';
            break;
    }
});

当您按下一个键- ,asd或者w-你会看到类似以下的输出:

第一个事件对象示例

从这里开始,您可以继续开发浏览器如何响应以及按下这些按键的用户,并且可以创建更加动态的网站。

接下来,我们将介绍最常用的事件属性之一:target属性。在下面的例子中,我们div在一个里面有三个元素section

事件测试div.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Events</title>
</head>
<body>

  <section>
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
  </section>

</body>
</html>

event.target在浏览器的开发者控制台中使用JavaScript,我们可以在外部section元素上放置一个事件监听器,并获得最深层嵌套的元素。

const section = document.querySelector('section');

// Print the selected target
section.addEventListener('click', event => {
    console.log(event.target);
});

单击这些元素中的任何一个都会将相关特定元素的输出返回到控制台event.target。这非常有用,因为它允许您只放置一个可用于访问许多嵌套元素的事件侦听器。

第二个事件对象示例

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

结论

事件是在网站上发生的操作,例如点击,悬停,提交表单,加载页面或按下键盘上的按键。当我们能够让网站响应用户采取的行动时,JavaScript就变得真正的互动和动态。

在本教程中,我们了解了哪些事件,常见事件的示例,事件处理程序和事件侦听器之间的区别以及如何访问该Event对象。利用这些知识,您将能够开始制作动态网站和应用程序。

未经允许不得转载:技术啦 - 关注IT,建站和运维,分享最新教程,资源 » 了解JavaScript中的事件

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址