如何在 JavaScript 中注册事件?
HTML 和 JavaScript 之间的交互是通过事件处理的。当用户在页面上完成某些操作时，就会发生事件。
在本教程中，我们将学习如何在 JavaScript 中注册事件。让我们继续进一步讨论这个问题。
使用作为 HTML 标记属性添加的内联事件处理程序
在这里，我们将了解此标准事件注册的工作原理。将事件添加到 DOM 属性是一种常规做法。但这是一种更糟糕的方法。
随着 HTML 和 JavaScript 的结合，扩展和维护代码变得困难。其次，如果用户与页面元素交互时代码加载较晚，就会出现错误。所以我们使用赋值方法。
我们必须在 HTML 属性和赋值方法中使用带有前缀"on"的区分大小写的事件名称。即 onclick、onfocus 等。
用户可以按照以下语法使用此方法。
语法
<button onclick="doFunction()">
//DOM 级别 0 事件处理程序
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() {});
//传递参数
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()方法的工作原理。该事件方法是IE特有的，仅适用于IE8及以下版本。
IE不支持事件冒泡。因此，此方法只需要事件类型和处理程序参数。我们需要在attach事件语法中提供onclick来注册click事件。但对于事件侦听器方法，我们需要编写click来注册click事件。
要调用此方法的注册函数，我们需要使用window对象。这些函数是全局的。
用户可以按照以下语法在程序中使用此方法。
语法
element.attachEvent (event, functionName);
从上面的语法中，我们可以注意到 addEventListener 方法之间的相似性。
参数
event − 事件的类型。例如，focus。
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方法。
