数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何通过点击事件调用 JavaScript 函数？
要在 JavaScript 中通过点击事件调用函数，您可以使用 **addEventListener** 方法或 **onclick** 事件属性。addEventListener 方法是将事件处理程序附加到 DOM 元素的通用方法，它允许您指定事件以及在事件发生时要调用的回调函数。
**onclick** 属性是一个特定的事件属性，它允许您指定在单击元素时要调用的 JavaScript 函数。这两种方法都允许您指定在单击元素时要调用的函数，但 addEventListener 方法更灵活，可以与任何类型的事件一起使用，而 onclick 属性则特定于单击事件。
要使用 **addEventListener** 方法，您需要使用 DOM API 获取元素，然后在其上调用 addEventListener 方法，并将事件名称和回调函数作为参数传递。
要使用 **onclick** 属性，您只需在 HTML 元素中将要调用的函数指定为属性的值。
使用 addEventListener() 方法添加点击事件
addEventListener() 方法用于将事件处理程序附加到任何 DOM 元素。此方法的语法如下所示。
语法
element.addEventListener( event, function, capture )
参数值
事件 - 您想要应用于元素的事件名称，例如 click、mouseover、submit 等。
函数 - 事件发生后将触发的回调函数。
捕获 - 事件是否应在捕获阶段执行。这将检查并显示布尔值；true 或 false。
返回值 - 无
步骤
以下是使用 addEventListener 方法将点击事件附加到按钮的步骤：
步骤 1 - 在 HTML body 中，创建一个按钮元素和一个 span 元素以显示计数器值。
步骤 2 - 在脚本中，使用其 ID 获取按钮和 span 元素。
步骤 3 - 使用 element.addEventListener 方法将“click”事件附加到按钮元素。
步骤 4 - 在事件侦听器的回调函数中，将计数器值增加 1。
步骤 5 - 使用 parseInt 函数将计数器值（字符串格式）转换为整数。
步骤 6 - 将新的计数器值分配给 span 元素。
步骤 7 - 在 Web 浏览器中打开 HTML 文件，然后单击按钮以查看计数器值增加。
示例
在此示例中，我们正在创建一个带有按钮的计数器，并且每次单击按钮后，我们都会增加计数器值。为了监听事件，我们使用 element.addEventListener 方法。
<html>
<body>
<h2> Using the element.addEventListener() method </h2>
<p>Click on the button to increase the counter value by one </p>
<button id="btn">Click me</button>
<p><b>Counter: </b> <span id="counter">1</span></p>
</body>
<script>
let btn = document.getElementById("btn")
let counter = document.getElementById("counter")
// Apply the addEventListener method
btn.addEventListener("click", myFunc)
// Defining the myFunc function
function myFunc() {
// Increase the existing value by 1
// Use the parseInt method to convert the existing
// value (which is in string format) into integer
counter.innerText = parseInt(counter.innerText) + 1
}
</script>
</html>
使用事件侦听器属性
浏览器允许我们从 HTML 本身触发事件。HTML 元素有一些事件属性，例如 onClick、onMouseOver、onSubmit 等。为了在这些事件触发后执行任何操作，我们为其分配一些 JavaScript 代码或调用 JavaScript 函数。
示例
在此示例中，我们正在创建一个带有按钮的计数器，并且每次单击按钮后，我们都会增加计数器值。为了监听事件，我们使用 onclick 属性。
<html>
<body>
<h2> Using the onclick event attribute</h2>
<p>Click on the button to increase the counter value by one </p>
<button id="btn" onclick="increseCounter()">Click me</button>
<p> <b>Counter: </b> <span id="counter">0</span> </p>
</body>
<script>
function increseCounter() {
// Get the button element
let btn = document.getElementById("btn")
// Get the counter element
let counter = document.getElementById("counter")
// Increase the existing value by 1
// Use the parseInt method to convert the existing
// value (which is in string format) into integer
counter.innerText = parseInt(counter.innerText) + 1
}
</script>
</html>
在本教程中，我们学习了如何在 JavaScript 中通过点击事件调用函数。有两种方法可以向任何元素添加点击事件，第一种是使用 addEventListener 方法，另一种是使用 onclick 事件属性。
22K+ 浏览量
