在 JavaScript 中添加事件监听器

在 JavaScript 中添加事件监听器

什么是事件处理？

当响应正在完成的工作而发生某些事情时，就会发生事件处理。用户单击狗品种的名称，他们的屏幕上会出现一张狗的照片。用户点击提交按钮，他们的反馈被添加到数据库中。她将鼠标悬停在一行文字上，文字变为紫色。

让我们从魔术的角度来看这个。我喜欢把事件分为两部分——写咒语和施咒。咒语的书写形式为 回调函数 .

什么是回调函数？

由于函数是 JavaScript 中的第一类对象，因此一个函数可以作为参数传递给另一个函数。回调函数就是这样 - 作为参数传递给另一个函数的函数。在这里，我们的回调函数决定了事件发生时会发生什么。

编写回调函数的一种方法是自己声明一个函数。在这里，我们正在“写一个咒语”，上面写着“当事件发生时，将文本颜色设为紫色。”：

 函数 mouseoverPurple(e){  
 e.target.style.color =“紫色”；  
 }

当我们编写这样的函数时，我们可以将它作为回调函数添加到任何我们想要的地方。如果我们想为整个应用程序中的不同事件多次重用一个函数，这会很有帮助。

选择页面上的元素

为了让回调函数发挥它的魔力，我们必须找到并“抓住”一个施法的目标。在这种情况下，我们的目标是无序列表中的项目。下面是我们将引用来获取我们的元素的 HTML。

 <h3>这是一个列表：</h3> <ul id="list">  
 <ul>第一项</ul>  
 <ul>第二项</ul>  
 <ul>第三项</ul>  
 </ul>

有很多方法可以找到元素。正如 W3 Schools 所说， 可以找到元素 通过它们的 id、标签名、类名、CSS 选择器或 HTML 对象集合。

最简单的方法是通过 id 获取元素。由于 id 是唯一的，这有助于在应用程序变得更复杂时消除混乱。我们将以这种方式获取我们的值，并将值设置为一个名为“ul”的常量：

 const ul = document.getElementById("list");

声明这个变量允许我们使用简单的几个字符而不是一整行代码来引用我们的元素。然后可以在整个应用程序中根据需要使用此变量。

添加事件监听器

一旦我们的咒语被写下并且我们选择了我们的目标，我们必须允许我们的用户“施放咒语”。通过向我们选择的元素添加事件侦听器来启用此功能。

事件侦听器需要两个参数：我们正在“侦听”的事件类型和计算机“听到”事件时发生的回调函数。

这里我们说，“事件是鼠标悬停，这个事件的目标是我们抓取的ul。当鼠标悬停在我们的一个列表项上时，施放我们写的那个咒语。这会将我们的 ul 的颜色更改为紫色。”：

 ul.addEventListener('mouseover', mouseoverPurple)

当用户对列出的元素执行事件时，就会施放咒语。

在我们的例子中，只要我们的用户将鼠标悬停在无序列表中的某个项目上，该项目的文本颜色就会变为紫色。

实现相同目标的另一种方法是编写咒语并让用户一举施展咒语。有了这么简单的咒语，我们不需要将我们的咒语写作和我们的咒语分成两个不同的部分。回调函数直接写在事件监听器内部，但结果是一样的。当用户将鼠标悬停在我们的无序列表中的某个项目上时，文本颜色将变为紫色。

 ul.addEventListener('mouseover', (e) => { e.target.style.color = '紫色'; })

最简洁的方法之一是将其编写为单行箭头函数，以便所有内容都整齐地组合在一起。这对于简单的事件特别有用。

 ul.addEventListener('mouseover', e => e.target.style.color = 'purple')

有许多不同类型的事件侦听器，利用它们为应用程序添加了大量的功能。如果它适合您的需要，甚至可以将多个事件侦听器添加到同一个元素。如果您希望美化您的应用程序并让您的用户获得更具交互性的体验，请查看以下资源。感谢您的光临！

资源 ：

• W3 Schools：JavaScript HTML DOM 元素
• MDN 网络文档：EventTarget.addEventListener()
• MND 网络文档：事件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11042/20530209