如何在JavaScript中创建和添加新函数
时间：2022-11-09
在JavaScript中，你可以通过function关键字来创建新函数。这些函数可以被定义在任何位置，但通常我们会将它们放在<script>标签内，或者在一个单独的JavaScript文件中。
以下是如何在JavaScript中创建和添加新函数的简单示例：
内联函数（直接在HTML中使用）：
html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript Functions</title>
</head>
<body>
<buttononclick="sayHello()">Click Me</button>
<script>
functionsayHello() {alert("Hello, World!");}
</script>
</body>
</html>
在这个例子中，我们定义了一个名为sayHello的函数，并通过onclick事件处理器将其绑定到一个HTML按钮上。当用户点击按钮时，浏览器会弹出一个包含“Hello, World!”的警告框。
在单独的<script>标签中定义函数：
html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript Functions</title>
</head>
<body>
<buttonid="myButton">Click Me</button>
<script>
functionsayHello() {alert("Hello, World!");}
// 使用addEventListener为按钮添加点击事件处理器
document.getElementById('myButton').addEventListener('click', sayHello);</script>
</body>
</html>
在这个例子中，我们使用了addEventListener方法而不是onclick属性来将sayHello函数绑定到按钮的点击事件上。这是一种更现代、更灵活的方法，允许你为同一事件添加多个处理器，而不需要担心覆盖已有的处理器。
在单独的JavaScript文件中定义函数：
假设你有一个名为script.js的JavaScript文件，你可以在这个文件中定义函数，然后在HTML文件中引用它。
script.js 文件内容：
javascript
functionsayHello() {alert("Hello, World!");}
HTML 文件内容：
html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript Functions</title>
<scriptsrc="script.js"></script><!-- 引用JavaScript文件 -->
</head>
<body>
<buttonid="myButton">Click Me</button>
<script>
document.getElementById('myButton').addEventListener('click', sayHello);</script>
</body>
</html>
在这个例子中，sayHello函数是在script.js文件中定义的，然后在HTML文件的<head>部分通过<script src="script.js"></script>标签引入。然后，在HTML文件的底部，我们再次使用addEventListener将sayHello函数绑定到按钮的点击事件上。
