HTML中怎么执行JS函数

HTML中执行JS函数的方法：通过事件属性、script标签、内联JavaScript代码、外部JavaScript文件。在HTML中执行JavaScript函数有多种方法，其中一种常用的方法是通过事件属性。事件属性可以直接在HTML元素的标签中定义，当特定事件发生时（如点击按钮、页面加载等），对应的JavaScript函数就会被执行。下面将详细介绍如何在HTML中使用这些方法来执行JavaScript函数。

一、通过事件属性

事件属性是最直观和常用的方法之一。常见的事件属性有onclick、onload、onmouseover、onchange等。以下是几个常见的示例：

1.1、onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick Event Example</title>
    <script>
        function sayHello() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Click Me!</button>
</body>
</html>

在这个示例中，当用户点击按钮时，sayHello函数会被执行，弹出一个提示框显示“Hello, World!”。

1.2、onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload Event Example</title>
    <script>
        function pageLoaded() {
            console.log("Page has been loaded.");
        }
    </script>
</head>
<body onload="pageLoaded()">
    <h1>Welcome to My Website</h1>
</body>
</html>

在这个示例中，当页面加载完成时，pageLoaded函数会被执行，并在控制台中输出“Page has been loaded.”。

二、通过script标签

使用<script>标签可以直接在HTML文档中包含JavaScript代码。可以在<script>标签中定义和执行函数。

2.1、内联JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <script>
        function displayMessage() {
            document.write("This is an inline JavaScript example.");
        }
        displayMessage();
    </script>
</body>
</html>

在这个示例中，页面加载时会立即执行displayMessage函数，并在页面上显示一段文字。

2.2、外部JavaScript文件

将JavaScript代码存储在一个独立的文件中，然后通过<script>标签引入这个文件。

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>External JavaScript Example</h1>
</body>
</html>

script.js文件：

function showAlert() {
    alert("This is an external JavaScript example.");
}
showAlert();

在这个示例中，HTML文件通过<script>标签引入了script.js文件，showAlert函数会在页面加载时被执行，弹出一个提示框。

三、通过事件监听器

事件监听器是一种更现代和灵活的方法，用于将事件与JavaScript函数绑定。

3.1、addEventListener方法

使用addEventListener方法可以将事件监听器添加到HTML元素上。这个方法比直接在HTML标签中使用事件属性更加灵活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addEventListener Example</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("myButton").addEventListener("click", function() {
                alert("Button was clicked!");
            });
        });
    </script>
</head>
<body>
    <button id="myButton">Click Me!</button>
</body>
</html>

在这个示例中，当页面加载完成时，会为按钮添加一个click事件监听器，用户点击按钮时会弹出一个提示框。

四、通过HTML属性调用匿名函数

有时候，我们希望在HTML事件属性中调用匿名函数，而不是定义在其他地方的命名函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anonymous Function Example</title>
</head>
<body>
    <button onclick="(function() { alert('Anonymous function called!'); })()">Click Me!</button>
</body>
</html>

在这个示例中，当用户点击按钮时，会立即执行匿名函数，弹出一个提示框。

五、通过JavaScript库和框架

使用JavaScript库和框架（如jQuery、React、Vue等）可以更方便地处理事件和执行函数。

5.1、使用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#myButton").click(function() {
                alert("Button clicked using jQuery!");
            });
        });
    </script>
</head>
<body>
    <button id="myButton">Click Me!</button>
</body>
</html>