在前端开发中，我们经常需要通过链接调用 JavaScript 函数来实现各种功能。而最常见的方式就是通过 a 标签来触发 JavaScript 函数。本文将介绍如何通过 a 标签调用 JavaScript。
基本语法
a 标签可以通过设置其 href 属性来跳转到指定的 URL，但同时也可以通过设置其 onclick 属性来执行 JavaScript 函数。例如：
<a href="#" onclick="myFunction()">Click me</a>
在上面的代码中，当用户点击链接时，浏览器不会进行页面跳转，而是会直接执行 myFunction() 函数。
使用事件监听器
除了使用 onclick 属性之外，我们还可以使用事件监听器来实现相同的功能。例如：
<a id="myLink" href="#">Click me</a>
<script>
document.getElementById("myLink").addEventListener("click", function(event) {
event.preventDefault(); // 阻止默认跳转行为
myFunction();
});
</script>在上面的代码中，我们首先给 a 标签添加了一个 id 属性以便于获取它，然后使用 addEventListener() 方法来注册一个 click 事件监听器。当用户点击链接时，该监听器会被触发，阻止默认的页面跳转行为，并执行 myFunction() 函数。
示例代码
下面是一个完整的示例，演示如何通过 a 标签调用 JavaScript：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ------------------ ------- ------ -- -------- ---------------------------- -- --------- -- ----------- -------------- -- --------- -------- -------- ------------ - ------------ --------- - ----------------------------------------------------------- --------------- - ----------------------- ------------- --- --------- ------- -------
在上面的代码中，我们定义了一个名为 myFunction() 的函数，并通过两个 a 标签来演示了两种不同的方式来调用它。第一个链接使用了 onclick 属性，而第二个链接使用了事件监听器。
总结
通过本文，我们学习了如何通过 a 标签调用 JavaScript 函数。无论是使用 onclick 属性还是事件监听器，都是非常简单和有效的方式。这些技巧可以帮助我们轻松地实现各种功能，例如打开弹窗、提交表单等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31100