html作为标记语言，本身没有执行逻辑代码的能力，要运行函数必须搭配JavaScript来实现。JavaScript的函数可以嵌入到html页面中，通过不同的触发条件执行对应的逻辑，下面介绍几种常用的实现方式。
通过事件属性触发函数
这是最常用的方式，html的很多标签都支持事件属性，比如<button>的onclick、<input>的onfocus等，当对应的事件发生时就会执行绑定的函数。
首先需要在<script>标签中定义函数，然后在标签的事件属性中调用函数即可，示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件触发函数示例</title>
</head>
<body>
<!-- 定义按钮，点击时触发showMsg函数 -->
<button onclick="showMsg()">点击我</button>
<script>
// 定义函数，弹出提示框
function showMsg() {
alert("你点击了按钮，函数执行成功");
}
</script>
</body>
</html>
除了onclick点击事件，还有onmouseover鼠标悬停、onchange输入框内容变化等事件属性，都可以用来绑定函数调用。
页面加载完成后自动运行函数
如果需要在页面加载完成后就自动执行某个函数，不需要用户操作，可以使用<body>的onload属性，或者监听DOMContentLoaded事件。
使用onload属性的示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面加载执行函数示例</title>
<script>
// 定义页面加载完成后执行的函数
function initPage() {
console.log("页面加载完成，函数自动执行");
document.getElementById("content").innerText = "页面初始化完成";
}
</script>
</head>
<body onload="initPage()">
<div id="content">等待初始化</div>
</body>
</html>
如果希望等DOM结构加载完成就执行函数，不需要等图片等资源加载，可以使用以下方式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DOM加载完成执行函数示例</title>
</head>
<body>
<div id="test">测试内容</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM结构加载完成，函数执行");
document.getElementById("test").style.color = "red";
});
</script>
</body>
</html>
在script标签内直接调用函数
如果函数的执行不需要依赖页面元素或者特定事件，也可以在<script>标签内直接调用函数，页面解析到该script标签时就会执行。
示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>直接调用函数示例</title>
</head>
<body>
<script>
// 定义函数
function calculate() {
let sum = 1 + 2;
console.log("计算结果为：" + sum);
}
// 直接调用函数
calculate();
</script>
</body>
</html>
通过外部js文件引入函数并调用
实际开发中通常会把JavaScript代码放到单独的js文件中，然后在html中引入，再调用文件中的函数。
首先创建外部js文件test.js，内容如下：
// test.js文件内容
function externalFunc() {
alert("这是外部js文件中的函数");
}
然后在html中引入该文件并调用函数：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部js函数调用示例</title>
<!-- 引入外部js文件 -->
<script src="test.js"></script>
</head>
<body>
<button onclick="externalFunc()">调用外部函数</button>
</body>
</html>
注意事项
- 函数必须先定义再调用，否则会出现未定义的错误，尤其是直接调用函数时，script标签要放在函数定义之后。
- 事件属性中调用函数时，要写完整的函数调用形式，比如
onclick="func()"，不能只写函数名。 - 如果函数需要传递参数，直接在调用的括号中传入即可，比如
onclick="showInfo('张三', 18)"。
HTMLJavaScript函数调用事件触发onclick修改时间：2026-07-09 14:39:42