HOWTO · JavaScript
如何在 onclick 事件中呼叫多個 JavaScript 函式
本教程介紹了在 JavaScript 中於 onclick 呼叫多個函式的各種方法。
本頁內容
若要在使用者點擊元素時執行多個動作，請將多個函式呼叫陳述式放入行內 onclick 處理程序中、使用 addEventListener 註冊個別的 callback，或在後續呼叫應取決於條件時使用 && 與 ||。對於易於維護的頁面程式碼，請選擇 addEventListener；行內處理程序對於小範例而言簡潔，而邏輯運算子則用於條件呼叫。
從行內 onclick 處理程序呼叫多個函式
行內處理程序可以包含多個以分號分隔的 JavaScript 陳述式。呼叫會依序執行。這會叫用每個函式；它不會將函式值傳遞給屬性。
執行此範例：
function saveDraft() {
console.log("Draft saved");
}
function showConfirmation() {
console.log("Confirmation shown");
}
function handleClick() {
saveDraft();
showConfirmation();
}
handleClick();
這個獨立範例展示了陳述式的順序。在頁面中，相同的呼叫可以放在按鈕的行內處理程序中：
<button type="button" onclick="saveDraft(); showConfirmation();">Save</button>
元素必須存在於頁面中，且兩個具名函式在點擊發生時都必須可用。如果某個呼叫擲出未捕捉的例外，同一個處理程序中的後續陳述式將不會執行。如果下一個動作仍必須發生，請在函式內部處理錯誤。
使用 addEventListener 註冊多個點擊處理程序
對於頁面程式碼，請個別註冊每個 callback。瀏覽器會依註冊順序叫用點擊的監聽器。如果某個監聽器擲出錯誤，事件派送會報告該錯誤，而其他已註冊的監聽器仍會被派送；個別的監聽器並不保證一個 callback 的非同步工作會在另一個開始之前完成。
<button id="save" type="button">Save</button>
<script>
const button = document.getElementById("save");
function saveDraft() {
console.log("Draft saved");
}
function showConfirmation() {
console.log("Confirmation shown");
}
button.addEventListener("click", saveDraft);
button.addEventListener("click", showConfirmation);
// To remove a listener later, use the same callback reference:
button.removeEventListener("click", showConfirmation);
</script>
removeEventListener 需要與註冊時相同的事件類型、相同的 callback 函式物件和相同的捕捉設定。如果你註冊了匿名函式且未保留其參考，你之後便無法傳遞同一個函式物件來將其移除。HTML 讓按鈕保持可見，JavaScript 則位於頁面腳本中；此瀏覽器範例不是主控台輸出範例。
使用 && 與 || 進行條件呼叫
邏輯運算子會短路求值：&& 僅當左側為真時才評估右側，而 || 僅當左側為假時才評估右側。這在第二個動作只應在該條件下執行時很有用，但它不會註冊多個事件監聽器。
function isValidPage(pageNumber) {
return Number.isInteger(pageNumber) && pageNumber >= 1 && pageNumber <= 10;
}
function fetchPageDetails(pageNumber) {
console.log(`Loading page ${pageNumber}`);
}
const pageNumber = 3;
isValidPage(pageNumber) && fetchPageDetails(pageNumber);
在這裡，fetchPageDetails 僅在 isValidPage 回傳真值時執行。使用 ||，當第一個運算式為假時，可以執行備援呼叫，例如 hasSavedValue() || loadDefaultValue()。對於刻意的條件執行，請使用 && 與 ||；當每個已註冊的 callback 都應回應點擊時，請使用個別的監聽器。