数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何找出触发了哪些 JavaScript 事件？
在本教程中，我们将学习如何找出触发了哪些 JavaScript 事件。我们可以向 HTML 元素添加事件，以便在网页上执行某些操作，例如更改文本、表单提交等。
有两种方法可以找出触发了哪些 JavaScript 事件：
- 使用开发者工具
- 使用检查元素
让我们逐一讨论它们，并提供代码示例。
使用开发者工具
我们可以通过使用浏览器中的开发者工具来找出触发了哪些 JavaScript 事件。要打开开发者工具，您需要按下 **Ctrl + Shift + I**；打开开发者工具后，请按照以下步骤操作：
- 转到 **源代码** 选项卡。
- 单击右侧的 **事件侦听器断点**。
- 然后执行将触发事件的操作，例如，如果使用的事件是点击，则点击；如果事件是双击，则双击。
步骤
- **步骤 1** - 在第一步中，我们将通过其 **ID** 访问使用事件的元素，并将其存储在一个变量中。
- **步骤 2** - 在下一步中，我们将声明一个函数，当触发特定事件时将调用该函数。
- **步骤 3** - 在最后一步中，我们将向函数添加功能，以便在触发事件时在网页上执行。
示例 1
以下示例将说明如何使用开发者工具方法来找出触发了哪些 JavaScript 事件：
<!DOCTYPE html> <html> <body> <h3>Finding out which JavaScript events fired</h3> <p id="para">Here, we will add event to element and then will see how can we findout it in browser.</p> <button id="btn" onclick="display()">click me!</button> <script> let btn = document.getElementById("btn"); function display() { let para = document.getElementById("para"); para.innerHTML = "<b>Text changed!!!</b>"; } </script> </body> </html>
让我们看看如何使用上述步骤在上述示例中找出触发了哪些 JavaScript 事件：
- 第一步，我们将打开 **开发者工具** 并转到 **源代码** 选项卡，如下所示：
- 在下一步中，我们将打开右侧显示的 **事件侦听器断点**，然后单击事件类别（在本例中为 **鼠标**），然后单击按钮以触发或触发事件；它将突出显示右侧触发的事件，如下面的图像所示：
在上面的示例中，我们学习了如何使用开发者工具方法找出在 **按钮** 标签上使用的 **点击** 事件。
使用检查元素
这是另一种查找触发 JavaScript 事件的方法。要实现此方法，首先需要通过右键单击浏览器来打开 **检查**，然后按照以下步骤操作：
- 转到 **元素** 选项卡。
- 单击使用事件的标签。
- 之后，单击下面的 **事件侦听器** 选项卡
让我们用一个代码示例来讨论它：
算法
- **步骤 1** - 在第一步中，我们需要获取输入标签和我们要在其上添加事件的元素，方法是使用它们各自的 ID。
- **步骤 2** - 在此步骤中，我们将使用 JavaScript 的 **addEventListener()** 方法将事件添加到元素，该方法将事件名称作为字符串和一个回调函数，当事件触发时将调用该回调函数。
- **步骤 3** - 在最后一步中，我们定义回调函数并提供在事件触发时将执行的功能。
示例
以下示例将解释如何使用检查元素方法来找出触发了哪些 JavaScript 事件：
<!DOCTYPE html> <html> <body> <h3>Find out which JavaScript events fired</h3> <p id="para">Here, we will add event to element and then will see how can we findout it in browser.</p> <form id="form"> <input type="text" id="inp"> <button id="btn">Change text</button> </form> <script> let inp = document.getElementById("inp"); let btn = document.getElementById("btn"); btn.addEventListener('click', function (event) { event.preventDefault(); let para = document.getElementById("para"); para.innerHTML = "<b>" + inp.value + "</b>"; } ); </script> </body> </html>
以下是此方法如何告知触发的 JavaScript 事件：
- 首先，我们将打开检查元素，然后转到元素选项卡，如下所示：
- 下一步，我们将在输入框中输入一些内容，然后单击触发事件的 **更改文本** 按钮，然后手动搜索并单击包含该事件的标签，之后单击下面的 **事件侦听器** 选项卡以查看触发的事件，下图将解释所有内容：
在此示例中，我们在 **按钮** 标签上使用了 **点击** 事件，然后查看使用检查元素方法查找触发或触发的事件的过程。
在本教程中，我们讨论了两种查找触发或触发的 JavaScript 事件的方法。您可以在以上示例中使用任何 JavaScript 事件，然后尝试任何讨论过的方法来找出触发的事件。
更新于： 2022-10-31
14K+ 浏览量
广告