如何在 JavaScript 中注册事件？

HTML 和 JavaScript 之间的交互是通过事件处理的。当用户在页面上执行某些操作时，就会发生事件。

在本教程中，我们将学习如何在 JavaScript 中注册事件。让我们继续深入讨论。

使用作为 HTML 标签属性添加的内联事件处理程序

在这里，我们将学习这种标准事件注册是如何工作的。将事件添加到DOM属性是一种常规做法。但这是一种更糟糕的方法。

随着 HTML 和 JavaScript 的结合，代码的扩展和维护变得困难。其次，如果代码在用户与页面元素交互时加载过晚，他们会收到错误。因此，我们使用赋值方法。

我们必须在 HTML 属性和赋值方法中都使用以“on”为前缀区分大小写的事件名称。也就是说，onclick、onfocus 等。

用户可以按照以下语法使用此方法。

语法

<button onclick="doFunction()">
//DOM level 0 event handlers
element.onclick = doAction;
element.onclick = doAction();
element.onclick = function() {}
element.onclick();
element.fireEvent('onclick');

我们在上面同时拥有 HTML 属性语法和各种赋值语法。

示例

在此程序中，我们在页面加载时注册事件。当用户单击标签或按钮时，该函数会更改其背景颜色。

<html>
<head>
   <script>
      function doAction() {
         this.style.backgroundColor = "#ffddee";
      }
      function doRegEvent() {
         idClick.onclick = doAction;
         idUser.onclick = doAction;
      }
   </script>
</head>
<body onload="doRegEvent();">
   <div id="idUser"> Hello, User! </div>
   <br>
   <button id="idClick"> Click Me! </button>
</body>
</html>

使用 addEventListener() 方法

在这里，我们将学习addEventListener()方法的工作原理。事件类型和处理程序是此方法的两个参数。这些是DOM级别 2 事件处理程序。

使用此方法，我们可以将事件侦听器添加到任何HTML DOM对象，例如 HTML 文档、HTML 元素、窗口对象或 xmlHttpRequest 对象。除了 IE8 及更早版本外，所有浏览器都支持此方法。

我们可以向一个元素添加多个事件处理程序。我们可以将相同的事件两次添加到相同的元素。事件处理程序的主要优点是我们可以使用关键字“this”访问所有内容，而不是将值或元素传递给函数。

用户可以按照以下语法在程序中使用它。

语法

element.addEventListener(event, function, bubbleCapture); //window
window.addEventListener(event, function() {});

//Passing parameters
element.addEventListener(event, function() {
   functionName(a, b);
});

在第一个语法中，我们有三个参数，如下所述。第二个语法是将事件注册到浏览器窗口。第三个语法表示带参数用法的匿名函数。

参数

  • event - 事件类型。例如，单击。

  • function - 事件发生时调用的函数。

  • bubbleCapture - 布尔值表示是否使用事件冒泡或事件捕获。默认值为 false。这是一个可选参数。

示例

我们已在此程序中使用 addEventListener() 方法注册了单击事件。当用户单击按钮时，当前日期将显示给用户。

<html>
<head>
   <title>JavaScript program to register events</title>
</head>
<body>
   <h3>Register events using the <i> addEventListener()</i> method</h3>
   <p>Click the below button</p>
   <button id="idBtn">Try it</button>
   <p id="idOut"></p>
   <script>
      document.getElementById("idBtn").addEventListener("click", showDate);
      function showDate() {
         document.getElementById("idOut").innerHTML = Date();
      }
   </script>
</body>
</html>

使用 attachEvent() 方法

在这里，我们将学习attachEvent()方法的工作原理。event 方法是 IE 特定的，仅在 IE8 及以下版本中有效。

IE 不支持事件冒泡。因此，此方法只需要事件类型和处理程序参数。我们需要在 attach event 语法中提供 onclick 以注册单击事件。但对于事件侦听器方法，我们需要编写 click 以注册单击事件。

要调用此方法的已注册函数，我们需要使用 window 对象。这些函数是全局的。

用户可以按照以下语法在程序中使用此方法。

语法

element.attachEvent (event, functionName);

从上面的语法中，我们可以注意到 addEventListener 方法之间的相似之处。

参数

  • event - 事件类型。例如，焦点。

  • function - 事件发生时执行的函数。

示例

在此程序中，我们在 head 部分注册了事件。我们添加了事件侦听器方法和事件附加方法。当用户单击按钮时，按钮文本将更改并显示给用户。

<html>
<head>
   <script type="text/javascript">
      function onEventAttach (){
         ataBtn.innerHTML = "Event Registered";
      }
      function doAddEvent() {
         var ataBtn = document.getElementById ("ataBtn");
         if (ataBtn.addEventListener) {
            ataBtn.addEventListener ("click", onEventAttach, false);
         } else {
            if (ataBtn.attachEvent) {
               ataBtn.attachEvent ('onclick', onEventAttach);
            }
         }
      }
   </script>
</head>
<body onload = "doAddEvent();" >
   <h2>Register events using the <i>attachEvent()</i> method</h2>
   <button id = "ataBtn" style = "background-color:#fbbbbf ">Click on this button</button>
</body>
</html>

在本教程中，我们学习了三种注册 JavaScript 事件的方法。

赋值方法非常简单。但它只允许每个元素添加一个处理程序。HTML 属性事件注册不是一种好的使用方法。

添加事件侦听器使用起来更方便，并且允许向一个元素添加多个事件处理程序。只有当我们需要在 IE8 或更高版本中注册事件时，才能使用 attachEvent 方法。

更新于: 2022年9月6日

3K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告