資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
