如何在 JavaScript 中为指定元素添加事件处理程序？\n

事件在 HTML 中是使用 HTML 元素发生的“事情”。当在 HTML 页面中使用 JavaScript 时，它可以“响应”这些事件。

事件是用户与用户界面元素交互的结果。触发事件的操作包括例如按下按钮、移动鼠标、在键盘上输入字符、从列表中选择项目以及滚动页面。

下面列出了 HTML 事件的示例 -

  • HTML 网页已完成加载
  • HTML 输入字段已更改
  • HTML 按钮被点击

添加事件处理程序

这些事件是用户或浏览器执行的操作。可以使用 JavaScript 代码将事件处理程序属性添加到 HTML 元素中。以下是此语法 -

<element event = ‘ JavaScript – code ’>
<element event = “ JavaScript – code ”>

示例 1

基本按钮

在下面的示例中，我们在按钮上实现了onclick事件，并将日期对象传递到 innerHTML 中。因此，如果我们点击按钮，它将在段落中显示日期和时间，因为我们将段落标签的 id 传递到 onclick 事件中。

<!DOCTYPE html>
<html>
<body>
   <button onclick="document.getElementById('dummy').innerHTML=Date()">The Time right now is: </button>
   <p id="dummy"></p>
</body>
</html>

示例 2

使用 HTML DOM 属性

在这个例子中，我们使用 HTML DOM 属性来添加事件。当用户点击按钮时，onclick 事件属性开始工作。当元素被鼠标点击时，脚本开始执行。

<!doctype html>
<html>
<head>
   <script>
      function Tutorialspoint() {
         alert('Welcome Tutorialspoint!');
      }
   </script>
</head>
<body>
   <button type="button" onclick="Tutorialspoint()"> Click! </button>
</body>
</html>

示例 3

在输入字段上添加两个事件

在这个例子中，使用 addEventListener，我们在文本字段（）中添加了两个按键事件。第一个按键事件将在您尝试使用键盘在文本字段中输入文本时发生。然后第二个按键事件将在第一个按键事件之后发生。

<!DOCTYPE html>
<html>
<body>
   <input id="input">
   <script>
      var a = document.getElementById("input");
      a.addEventListener("keypress", firstFunction);
      a.addEventListener("keypress", secondFunction);
      function firstFunction() {
         alert ("Keypress happened inside the text-box!");
      }
      function secondFunction() {
         alert ("Welcome to TutorialsPoint!");
      }
   </script>
</body>
</html>

第一个按键事件发生在您按下键盘键以在输入字段中键入内容时。

第二个按键事件将在点击警示框中的“确定”按钮后发生。

示例 4

更改 HTML 元素的 CSS

在这个例子中，一个“keypress”事件使用 addEventListener() 方法附加到一个 input 元素。在函数中，我们使其通过使用style.backgroundColor更改颜色。如果用户在输入字段中输入任何键，它将更改其颜色。

<!DOCTYPE html>
<html>
<body>
   <p>Do try to type something in the text-box below and it will change it's color</p>
   <input type="text" id="example">
   <script>
      document.getElementById("example").addEventListener("keypress", func);
      function func() {
         document.getElementById("example").style.backgroundColor = "green";
      }
   </script>
</body>
</html>

在字段中键入一些键后，会导致颜色更改。

示例 5

向文本框添加事件侦听器

在下面的示例中，我们将讨论如何向文本框添加事件处理程序。在这种情况下，我们将使用一个文本字段并向其添加一个事件侦听器，以便在鼠标悬停在其上时显示内容。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add an event handler</title>
   <div id="clk">Hello, Alice</div>
   <input type="text" value="mouseover here" id="txt" />
</head>
<body>
   <script>
      document.getElementById("txt").addEventListener("mouseover", function () {
         document.getElementById("clk").innerHTML =
            "Tutorix is the best e-learning platform.";
      });
   </script>
</body>
</html>

示例 6

以下是另一个向按钮添加事件的示例 -

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add an event handler</title>
   <div id="clk">Hello, Alice</div>
   <input type="button" value="mouseout here" id="btn" />
</head>
<body>
   <script>
      document.getElementById("btn").addEventListener("mouseout", function () {
         document.getElementById("clk").innerHTML =
            "Tutorix is the best e-learning platform.";
      });
   </script>
</body>
</html>

更新于： 2022-09-19

285 次查看

开启您的 职业生涯

完成课程获得认证

开始学习
广告