深入理解JavaScript中的事件-js教程-PHP中文网

首页

web前端

js教程

深入理解JavaScript中的事件

青灯夜游

Sep 28, 2020 pm 05:56 PM

javascript原型继承

深入理解JavaScript中的事件

在本文中，我们将讨论事件处理程序、事件监听器和事件对象。我们还将介绍三种不同的处理事件的方法，以及一些最常见的事件。通过了解事件，您将能够为用户提供更具交互性的web体验。

事件是发生在浏览器中的操作，可以由用户或浏览器本身发起。以下是一些发生在网站上的常见事件:

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

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

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

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

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

一个事件侦听器附加一个响应界面的元素，它允许特定元素等待和“监听”给定的事件触发。

将事件分配给元素有三种方法：

内联事件处理程序
事件处理程序属性
事件听众

我们将详细介绍这三种方法，以确保您熟悉触发事件的每种方法，然后讨论每种方法的优缺点。

内联事件处理程序属性

要开始学习事件处理程序，我们首先考虑内联事件处理程序。让我们从一个非常基本的例子开始，它由一个按钮元素和一个p元素组成。我们希望用户单击按钮来更改p的文本内容。

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

<!DOCTYPE html>
<html>
  
  <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>

直接在按钮上，我们将添加一个名为onclick的属性。属性值将是我们创建的一个名为changeText()的函数。

<!DOCTYPE html>
<html>
  
  <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()函数，它将修改p元素的textContent。

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

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

首次加载events.html，您会看到如下所示的页面：

但是，当您或其他用户单击按钮时，p标记的文本将从Try to change me更改为。我改变了，因为内联事件处理程序。

内联事件处理程序是开始理解事件的一种直接方法，但是通常不应该超出测试和教育目的而使用它们。

您可以将内联事件处理程序与HTML元素上的内联CSS样式进行比较。维护单独的类样式表比在每个元素上创建内联样式更为实际，就像维护完全通过单独的脚本文件处理的JavaScript而不是向每个元素添加处理程序一样。

事件处理程序属性

内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常相似，只是我们在JavaScript中设置了元素的属性，而不是HTML中的属性。

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

… < body >

<button > Click me < /button>

    <p>I will change.</p >

</body>
…/

我们的函数也将保持类似，只是现在我们需要访问JavaScript中的button元素。我们可以简单地访问onclick，就像访问style或id或任何其他元素属性一样，然后分配函数引用。

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

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

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

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

当你第一次载入网页时，浏览器会显示以下内容:

现在，当你点击这个按钮，它会有一个类似的效果:

请注意，当将函数引用传递给onclick属性时，我们不包含括号，因为我们当时没有调用函数，而只是传递了对它的引用。

事件处理程序属性的可维护性略好于内联处理程序，但它仍然存在一些相同的障碍。例如，尝试设置多个单独的onclick属性将导致覆盖除最后一个外的所有属性，如下所示。

const p = document.querySelector(&#39;p&#39;);
const button = document.querySelector(&#39;button&#39;);

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

const alertText = () = >{
    alert(&#39;Will I alert?&#39;);
}

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

在上面的例子中，单击按钮只会显示一个警告，而不会更改p文本，因为alert()代码是最后添加到属性的代码。

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

事件监听器

JavaScript事件处理程序的最新添加是事件侦听器。事件侦听器监视元素上的事件。我们将使用addEventListener()方法侦听事件，而不是直接将事件分配给元素上的属性。

addEventListener()接受两个强制参数——要侦听的事件和侦听器回调函数。

事件监听器的HTML与前面的示例相同。

… < button > Click me < /button>

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

我们仍然将使用与以前相同的changeText()函数。我们将把addEventListener()方法附加到按钮上。

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

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

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

注意，对于前两个方法，click事件被称为onclick，但是对于事件监听器，它被称为click。每个事件监听器都会从单词中删除这个词。在下一节中，我们将查看更多其他类型事件的示例。

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

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

const p = document.querySelector(&#39;p&#39;);
const button = document.querySelector(&#39;button&#39;);

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

const alertText = () = >{
    alert(&#39;Will I alert?&#39;);
}

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

在本例中，这两个事件都将触发，一旦单击退出警告，就向用户提供一个警告和修改后的文本。

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

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

还可以使用removeEventListener()函数从元素中删除一个或所有事件。

// Remove alert function from button element
button.removeEventListener(&#39;click&#39;, alertText);

此外，您可以在文档和窗口对象上使用addEventListener()。

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

常见的事件

我们已经了解了使用click事件的内联事件处理程序、事件处理程序属性和事件侦听器，但是JavaScript中还有更多的事件。下面我们将讨论一些最常见的事件。

鼠标事件

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

事件	描述
click	当鼠标被按下并释放到元素上时触发
dblclick	当元素被单击两次时触发
mouseenter	当指针进入元素时触发
mouseleave	当指针离开一个元素时触发
mousemove	每当指针在元素中移动时触发

单击是一个复合事件，由组合的mousedown和mouseup事件组成，当分别按下或抬起鼠标按钮时，将触发这两个事件。

使用mouseenter和mouseleave同时创建一个悬停效果，只要鼠标指针停留在元素上，悬停效果就会持续。

表单事件

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

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

当选择一个元素时，例如，通过鼠标单击或通过TAB键导航到它，就可以实现焦点。

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

键盘事件

键盘事件用于处理键盘操作，例如按下一个键、举起一个键和按住一个键。

事件	描述
keydown	按下某个键时会触发一次
keyup	释放钥匙时触发一次
keypress	按键时连续激发

尽管它们看起来很相似，但keydown和keypress事件不能访问所有完全相同的键。keydown将确认按下的每个键，而keypress将省略不生成字符的键，如SHIFT、ALT或DELETE。

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

如果将一个称为事件对象的参数传递给事件侦听器，我们就可以访问有关所发生的操作的更多信息。与键盘对象相关的三个属性包括keyCode、key和code。

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

属性	描述	例
keyCode	与键有关的数字。	65
key	表示字符名	a
code	表示按下的物理键	KeyA

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

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

一旦在控制台上按下ENTER键，现在就可以按键盘上的键了，在本例中，我们将按a。

输出：

keyCode: 65
key: a
code: KeyA

keyCode属性是一个与已按下的键相关的数字。key属性是字符的名称，它可以更改——例如，用SHIFT键按下a将导致键为a。code属性表示键盘上的物理键。

注意，keyCode正在被废弃，最好在新项目中使用代码。

事件对象

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

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

要试用它，请使用e388a4556c0f65e1904146cc1a846bee标记创建基本HTML文件并将其加载到浏览器中。

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <p>
    </p>
  </body>

</html>

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

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

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

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

当您按下一个键- ，a，s，d或者w-你会看到类似以下的输出：

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

接下来，我们将介绍一个最常用的事件属性：target属性。在下面的示例中，我们div在一个内部有三个元素section。

<!DOCTYPE html>
<html>
  
  <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>

使用事件。在浏览器的开发人员控制台中，我们可以将一个事件侦听器放在外部section元素上，并获得嵌套最深的元素。

const section = document.querySelector(&#39;section&#39;);

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

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