資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何透過點選事件呼叫 JavaScript 函式？
要在 JavaScript 中透過點選事件呼叫函式，您可以使用 `addEventListener` 方法或 `onclick` 事件屬性。`addEventListener` 方法是將事件處理程式附加到 DOM 元素的通用方法，它允許您指定事件和在事件發生時呼叫的回撥函式。
`onclick` 屬性是一個特定的事件屬性，允許您指定在單擊元素時呼叫的 JavaScript 函式。這兩種方法都允許您指定在單擊元素時呼叫的函式，但 `addEventListener` 方法更靈活，可用於任何型別的事件，而 `onclick` 屬性特定於單擊事件。
要使用 `addEventListener` 方法，您需要使用 DOM API 獲取元素，然後在其上呼叫 `addEventListener` 方法，傳入事件名稱和回撥函式作為引數。
要使用 `onclick` 屬性，您只需在 HTML 元素中將要呼叫的函式指定為屬性的值。
使用 addEventListener() 方法新增點選事件
`addEventListener()` 方法用於將事件處理程式附加到任何 DOM 元素。此方法的語法如下。
語法
element.addEventListener( event, function, capture )
引數值
事件 - 您想要應用於元素的事件名稱，例如 click、mouseover、submit 等。
函式 - 事件發生後將觸發的回撥函式。
捕獲 - 是否應在捕獲階段執行事件。這將檢查並顯示布林值；true 或 false。
返回值 - 無
步驟
以下是使用 `addEventListener` 方法將點選事件附加到按鈕的步驟：
步驟 1 - 在 HTML body 中，建立一個按鈕元素和一個 span 元素來顯示計數器值。
步驟 2 - 在指令碼中，使用它們的 ID 獲取按鈕和 span 元素。
步驟 3 - 使用 `element.addEventListener` 方法將“click”事件附加到按鈕元素。
步驟 4 - 在事件偵聽器的回撥函式中，將計數器值增加 1。
步驟 5 - 使用 `parseInt` 函式將計數器值（字串格式）轉換為整數。
步驟 6 - 將新的計數器值賦給 span 元素。
步驟 7 - 在 Web 瀏覽器中開啟 HTML 檔案，然後單擊按鈕以檢視計數器值增加。
示例
在這個例子中，我們建立一個帶有按鈕的計數器，每次點選按鈕後，我們都會增加計數器的值。為了監聽事件，我們使用 `element.addEventListener` 方法。
<html>
<body>
<h2> Using the element.addEventListener() method </h2>
<p>Click on the button to increase the counter value by one </p>
<button id="btn">Click me</button>
<p><b>Counter: </b> <span id="counter">1</span></p>
</body>
<script>
let btn = document.getElementById("btn")
let counter = document.getElementById("counter")
// Apply the addEventListener method
btn.addEventListener("click", myFunc)
// Defining the myFunc function
function myFunc() {
// Increase the existing value by 1
// Use the parseInt method to convert the existing
// value (which is in string format) into integer
counter.innerText = parseInt(counter.innerText) + 1
}
</script>
</html>
使用事件監聽器屬性
瀏覽器允許我們從 HTML 本身觸發事件。HTML 元素有一些事件屬性，例如 onClick、onMouseOver、onSubmit 等。為了在這些事件觸發後執行任何操作，我們為其分配一些 JavaScript 程式碼或呼叫 JavaScript 函式。
示例
在這個例子中，我們建立一個帶有按鈕的計數器，每次點選按鈕後，我們都會增加計數器的值。為了監聽事件，我們使用 `onclick` 屬性。
<html>
<body>
<h2> Using the onclick event attribute</h2>
<p>Click on the button to increase the counter value by one </p>
<button id="btn" onclick="increseCounter()">Click me</button>
<p> <b>Counter: </b> <span id="counter">0</span> </p>
</body>
<script>
function increseCounter() {
// Get the button element
let btn = document.getElementById("btn")
// Get the counter element
let counter = document.getElementById("counter")
// Increase the existing value by 1
// Use the parseInt method to convert the existing
// value (which is in string format) into integer
counter.innerText = parseInt(counter.innerText) + 1
}
</script>
</html>
在本教程中，我們學習瞭如何在 JavaScript 中透過點選事件呼叫函式。有兩種方法可以為任何元素新增點選事件，第一種是使用 `addEventListener` 方法，另一種是使用 `onclick` 事件屬性。
22K+ 次瀏覽
