在前端开发中，经常需要在 HTML 页面中执行一些 JavaScript 函数。虽然你可以在 href 属性中写入 JavaScript 代码来实现这个目的，但这种做法并不被推荐，因为它不仅容易出错，还存在安全风险。
在本文中，我们将介绍如何在 HTML 中使用 JavaScript 函数调用，以替代 href 属性。我们将讨论以下几点：
- 事件处理程序
- 使用 data-* 属性
- 动态添加事件监听器
1. 事件处理程序
HTML5 引入了一种新的属性，叫做“事件处理程序”（event handler）。事件处理程序允许你在 HTML 元素中直接指定一个 JavaScript 函数，当元素触发相应事件时，该函数就会被自动调用。
以下是一个例子：
<button onclick="myFunction()">点击我</button>
<script>
function myFunction() {
alert("Hello World!");
}
</script>在上面的代码中，当用户点击按钮时，myFunction() 函数会被调用，并弹出一个对话框显示“Hello World!”。
事件处理程序非常方便，但也有一些缺点。首先，如果你想要为同一个元素绑定多个事件处理程序，那就只能通过添加额外的属性来实现。其次，由于事件处理程序是直接写在 HTML 中的，所以代码的可读性和可维护性都比较差。
因此，我们通常不会使用事件处理程序来为 HTML 元素绑定 JavaScript 函数。
2. 使用 data-* 属性
另一种方式是使用 HTML5 的“自定义数据属性”（custom data attributes），即在 HTML 元素中添加类似于 data-xxx 的属性，然后在 JavaScript 中通过 getAttribute() 方法来读取它们的值。
以下是一个例子：
<button id="myButton" data-message="Hello World!">点击我</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
var message = this.getAttribute("data-message");
alert(message);
});
</script>在上面的代码中，当用户点击按钮时，addEventListener() 方法会动态地为该元素添加一个“click”事件监听器。当事件被触发时，回调函数会读取该元素的 data-message 属性值，并弹出一个对话框显示这个值。
使用自定义数据属性可以让你更加灵活地指定 JavaScript 函数，并且代码的可读性和可维护性也会大大提高。
3. 动态添加事件监听器
除了在 HTML 元素中指定事件处理程序或自定义数据属性外，还有一种更加灵活的方式，那就是在 JavaScript 中动态地为元素添加事件监听器。
以下是一个例子：
<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Hello World!");
});
</script>在这个例子中，我们通过 getElementById() 方法获取了一个按钮元素，并调用了它的 addEventListener() 方法来为它添加一个“click”事件监听器。当用户点击按钮时，回调函数就会被调用，并弹出一个对话框显示“Hello World!”。
动态添加事件监听器允许你更加灵活地管理 HTML 元素与 JavaScript 函数之间的关系，同时也可以提高代码的可读性和可维护性。
结论
在前端开发中，我们需要经常使用 JavaScript 函数来实现一些交互效果。虽然 href 属性可以实现这个目的，但并不被推荐。相反，我们可以使用事件处理程序、自定义数据属性或动态添加事件监听器来指定 JavaScript 函数，以更
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13727