在 JavaScript 中处理事件

摘要：在本教程中，您将学习在 JavaScript 中执行事件处理的各种方法。

当事件发生时，您可以创建一个事件处理程序，它是一个将在事件发生时执行的函数。事件处理程序也称为事件侦听器。它侦听事件并做出相应的响应。

事件侦听器可以是函数，如果要重复使用它，则具有显式名称，或者如果仅使用一次，则为匿名函数。

一个事件可以由一个或多个事件处理程序处理。如果一个事件有多个事件处理程序，那么当事件触发时，所有事件处理程序都将被执行。

有三种方法可以分配事件处理程序。

1) HTML 事件处理程序属性

事件处理程序通常具有以on开头的名称，例如，click事件的事件处理程序为onclick。

要将事件处理程序分配给与 HTML 元素关联的事件，可以使用带有事件处理程序名称的 HTML 属性。例如，要执行一些代码以在单击按钮时执行，请使用以下代码

<input type="button" value="Save" onclick="alert('Clicked!')">Code language: JavaScript (javascript)

在这种情况下，当单击按钮时，将显示alert框。

当您将 JavaScript 代码作为onclick属性的值分配时，您需要转义 HTML 字符，例如与号 (&)、双引号 (")、小于号 (<) 等，否则会发生语法错误。

在 HTML 中定义的事件处理程序可以调用在脚本中定义的函数。例如

<script>
    function handleClick() {
        alert('Clicked!');
    }
</script>
<input type="button" value="Save" onclick="handleClick()">Code language: JavaScript (javascript)

在此示例中，handleClick()函数在单击按钮时执行。

handleClick()是在单独的<script>元素中定义的函数，可以放在外部 JavaScript 文件中。

重要说明

当您将事件处理程序用作 HTML 元素的属性时，以下是一些重要要点

首先，事件处理程序中的代码可以在没有显式定义的情况下访问event对象

<input type="button" value="Save" onclick="alert(event.type)">Code language: JavaScript (javascript)

其次，事件处理程序内部的this值等效于事件的目标元素

<input type="button" value="Save" onclick="alert(this.value)">Code language: JavaScript (javascript)

第三，事件处理程序可以访问元素的属性，例如

<input type="button" value="Save" onclick="alert(value)">Code language: JavaScript (javascript)

使用 HTML 事件处理程序属性的缺点

使用 HTML 事件处理程序属性分配事件处理程序被认为是一种不好的做法，应尽可能避免，原因如下

首先，事件处理程序代码与 HTML 代码混合在一起，这将使代码更难维护和扩展。

其次，这是一个时序问题。如果元素在 JavaScript 代码之前完全加载，用户可以开始与网页上的元素进行交互，这会导致错误。

例如，假设以下handleClick()函数是在外部 JavaScript 文件中定义的

<input type="button" value="Save" onclick="handleClick()">Code language: JavaScript (javascript)

当页面完全加载而 JavaScript 尚未加载时，handleClick()函数未定义。如果用户此时单击按钮，则会发生错误。

2) DOM Level 0 事件处理程序

每个元素都有事件处理程序属性，例如onclick。要分配事件处理程序，您将属性设置为函数，如示例所示

let btn = document.querySelector('#btn');

btn.onclick = function() {
    alert('Clicked!');
};Code language: JavaScript (javascript)

在这种情况下，匿名函数成为button元素的方法。因此，this值等效于元素。并且您可以在事件处理程序内访问元素的属性

let btn = document.querySelector('#btn');

btn.onclick = function() {
    alert(this.id); 
};Code language: JavaScript (javascript)

输出

btnCode language: JavaScript (javascript)

通过在事件处理程序内部使用this值，您可以访问元素的属性和方法。

要删除事件处理程序，您将事件处理程序属性的值设置为null

btn.onclick = null;Code language: JavaScript (javascript)

DOM Level 0 事件处理程序仍然被广泛使用，因为它们简单且跨浏览器支持。

3) DOM Level 2 事件处理程序

DOM Level 2 事件处理程序提供两种主要方法来处理注册/取消注册事件侦听器

addEventListener() – 注册事件处理程序。
removeEventListener() – 删除事件处理程序。

这些方法在所有 DOM 节点中都可用。

addEventListener() 方法

addEventListener()方法接受三个参数：事件名称、事件处理程序函数和一个布尔值，该布尔值指示方法在捕获阶段 (true) 或冒泡阶段 (false) 调用事件处理程序。例如

let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
    alert(event.type); // click
});Code language: JavaScript (javascript)

可以添加多个事件处理程序来处理单个事件，例如

let btn = document.querySelector('#btn');
btn.addEventListener('click',function(event) {
    alert(event.type); // click
});

btn.addEventListener('click',function(event) {
    alert('Clicked!');
});Code language: JavaScript (javascript)

removeEventListener() 方法

removeEventListener()删除通过addEventListener()添加的事件侦听器。但是，您需要传递与传递给addEventListener()的参数相同的参数。例如

let btn = document.querySelector('#btn');

// add the event listener
let handleClick = function() {
    alert('Clicked!');
};
btn.addEventListener('click', handleClick);

// remove the event listener
btn.removeEventListener('click', handleClick);Code language: JavaScript (javascript)

使用匿名事件侦听器如下将不起作用

let btn = document.querySelector('#btn');
btn.addEventListener('click',function() {
   alert('Clicked!');
});

// won't work
btn.removeEventListener('click', function() {
   alert('Clicked!');
});Code language: JavaScript (javascript)

总结

有三种方法可以分配事件处理程序：HTML 事件处理程序属性、元素的事件处理程序属性和addEventListener()方法。
应避免通过 HTML 事件处理程序属性分配事件处理程序。

测验

本教程是否有帮助？