在 Onclick 事件中呼叫多個 JavaScript 函式
我們非常熟悉 javascript 中的 onclick 事件，它會觸發某個函式作為值傳遞給 onclick 屬性。幾乎所有 HTML 元素都支援 HTML 的 文件物件模型 (DOM) 事件，除了像 <br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。它通常用於 html 標籤，如 <div>、<button>、<li>、<span>、<a> 等。但是我們如何在一個標籤上呼叫多個函式？單擊 <div>、<li> 或 <button>。以下是一些方法。
- 將函式作為值傳遞給
onclick引數 - 使用不顯眼的 JavaScript
- 使用
&&和||運營商
將函式作為值傳遞給 onclick 引數
使用 onclick 屬性的最常見方法是將函式作為值分配給 onclick。我們通常在 HTML 標籤內的 GUI 程式碼中編寫它。要將多個函式作為值傳遞，請在該標籤的 onclick 屬性中以分號分隔列出它們。它的語法如下。
onclick = "functionA(); functionB();"
這兩個功能將一個接一個地執行。例如，如果我們將以下程式碼與函式 functionA() 和 functionB() 一起使用，結果將是按照值中提到的順序依次執行這兩個函式。
<div id="output" onclick="functionA(); functionB();"></div>
function functionA() {
for (let i=0; i<5; i++) {
console.log(i + " Mars is a planet");
}
}
function functionB() {
for (let i=0; i<5; i++) {
console.log(i + " The sky is blue");
}
}
輸出：
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
評論
- 所有網路瀏覽器和大多數 HTML 元素都支援使用
onclick執行多個功能。它是一種簡潔明瞭的多函式呼叫方法。 - 函式執行是順序的。因此，你可以通過相應地列出函式來規劃方法呼叫的順序。
- 除了在一個函式名後使用分號，我們還可以用逗號分隔它們。這意味著
onclick = "function1(), function2()"也是一個有效的語法。 - 使用傳遞給
onclick事件的多個函式有一個缺點。如果作為引數傳遞的任何方法由於某些異常而失敗，則會破壞整個鏈。並且它後面的所有函式都不會被執行。 - 在標籤中使用
onclick使程式碼可讀。我們不操縱 DOM 不操縱。這意味著我們在 HTML 中靜態指定函式。因此，我們不會在執行時向 DOM 元素的onclick事件新增任何function。瀏覽器解析 HTML，可以在解析階段關聯點選事件。
使用不顯眼的 JavaScript
在 JavaScript 中的 onclick 中傳遞函式的另一種方法是在 JavaScript 程式碼中新增 onclick 偵聽器。在這個方法中，我們找到目標元素並將我們的函式連結到該元素的 onclick 事件。unobtrusive 方法是一種程式設計方式，我們將 javascript 事件儲存在 js 程式碼中，而 HTML 僅包含靜態頁面（參考此處瞭解更多資訊）。以下是在點選事件上呼叫多個函式的不顯眼的方式。
let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);
輸出：
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
評論
- 功能按順序執行但不相關。因此，如果一個函式無法執行，其餘的函式不會像
onclick="functionA(), functionB()"中的情況那樣被阻止。 - 我們可以使用此方法新增多個功能。要動態刪除已新增的函式，我們需要使用
removeEventListener。語法如下。
element.removeEventListener('click', alertFirst);
- 除錯功能會很困難，因為 HTML 不會顯示與 HTML 元素的
onclick連結的功能。在編譯 javascript 程式碼時，這些方法會在執行時對映到onclick事件。 - 這種在執行時新增
onclick的方法可以靈活地根據業務邏輯巧妙地執行功能，因為關聯是在執行時的編譯階段完成的。
使用 && 和 ||運營商
一個可以包含由&&和||分隔的多個函式運營商。這些函式應該有一個布林返回型別。通常，當需要決定某些條件然後執行預期功能時，我們會使用這種方法。如果這些條件需要複雜或冗長的邏輯檢查，最好將它們建立為函式並將它們儲存在 js 程式碼中，以使 HTML 簡潔易讀。下面的程式碼詳細說明了使用。
<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>
function isValidPage(pageNumber) {
let pageNum = parseInt(pageNumber);
let maxPagesCount = 10;
let isValidPageNumber = false;
if (!isNaN(pageNum)) {
if (pageNum > 1 && pageNum < maxPagesCount) {
isValidPageNumber = true;
}
}
return isValidPageNumber;
}
function fetchPageDetails(pageNumber) {
// Call Backend service to get the detils
}
在上面的程式碼中，只有在 isValidPage() 函式返回 true 後才會呼叫 fetchPageDetails() 函式。本質上，&& 操作符確保 fetchPageDetails() 函式僅在 pagenumber 有效時執行。
評論
- 在這種方法中，函式的執行是順序的。它遵循使用
&&和||的程式碼作為邏輯運營商。如果一個方法由於異常而失敗，那麼它不會執行剩餘的函式。 - 如果函式具有布林返回型別或與程式碼中使用的邏輯運算子匹配的型別，我們可以使用此方法。
- 由於我們在 HTML 元素的 click 屬性中指定了函式，因此該方法是宣告多個函式的靜態方式。我們不進行任何執行時關聯。