如何在JavaScript中創(chuàng)建和添加新函數(shù)
時間：2022-11-09
在JavaScript中，你可以通過function關(guān)鍵字來創(chuàng)建新函數(shù)。這些函數(shù)可以被定義在任何位置，但通常我們會將它們放在<script>標簽內(nèi)，或者在一個單獨的JavaScript文件中。
以下是如何在JavaScript中創(chuàng)建和添加新函數(shù)的簡單示例：
內(nèi)聯(lián)函數(shù)（直接在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的函數(shù)，并通過onclick事件處理器將其綁定到一個HTML按鈕上。當用戶點擊按鈕時，瀏覽器會彈出一個包含“Hello, World!”的警告框。
在單獨的<script>標簽中定義函數(shù)：
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函數(shù)綁定到按鈕的點擊事件上。這是一種更現(xiàn)代、更靈活的方法，允許你為同一事件添加多個處理器，而不需要擔心覆蓋已有的處理器。
在單獨的JavaScript文件中定義函數(shù)：
假設你有一個名為script.js的JavaScript文件，你可以在這個文件中定義函數(shù)，然后在HTML文件中引用它。
script.js 文件內(nèi)容：
javascript
functionsayHello() {alert("Hello, World!");}
HTML 文件內(nèi)容：
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函數(shù)是在script.js文件中定義的，然后在HTML文件的<head>部分通過<script src="script.js"></script>標簽引入。然后，在HTML文件的底部，我們再次使用addEventListener將sayHello函數(shù)綁定到按鈕的點擊事件上。
