使用 onclick 事件呼叫 JavaScript 函式
-
使用
onclick事件處理程式呼叫 JavaScript 函式 - 使用純 JavaScript 將 JavaScript 函式附加到 HTML 元素
-
在 HTML 元素中的
onclick事件處理程式上定義函式 -
使用
addEventListener呼叫 JavaScript 函式
即使我們為網頁設計靜態 HTML 內容，我們也可能希望使其具有使用者互動性。預設情況下，HTML 元素是愚蠢的。<a> 標籤是使用者互動的，但主要用於載入特定路徑。像 div 這樣的 HTML 元素可以通過向它們新增事件處理程式來實現使用者互動。我們將討論一種稱為 onclick 事件處理程式的此類事件處理程式。有幾種方法可以將其新增到 HTML 元素中。
使用 onclick 事件處理程式呼叫 JavaScript 函式
我們可以使用 HTML 中的 onclick 事件處理程式或在 JavaScript 中附加事件處理程式，將 JavaScript 函式繫結到 div。讓我們參考以下程式碼，其中我們將事件處理程式附加到 div 元素。
<div id="interactive-div" onclick="changeMyColor('interactive-div')" style="cursor: pointer;">Click me</div>
function changeMyColor(id) {
var el = document.getElementById(id);
el.style.color = 'blue';
}
div 元素預設不接受任何點選事件。在程式碼中，我們將 JavaScript 函式 changeMyColor() 繫結到 div 的 onclick 事件處理程式。它現在使 div 可點選。即使我們為 div 定義了 onclick 事件處理程式，使用者仍然不知道 div 是否接受點選，除非他點選。一旦使用者將滑鼠懸停在我們的目標 div 上，將游標標記為不同的 UI/UX 是一個很好的 UI/UX。為此，我們將內聯樣式 style="cursor: pointer;" 分配給 div 元素。一旦使用者將滑鼠懸停在 div 上，游標將顯示一個手勢，表明它可以點選。
function changeMyColor(id) {
var el = document.getElementById(id);
el.style.color = 'blue';
}
在 JavaScript 程式碼中，我們定義了傳遞給 div 的 onclick 事件的函式 changeMyColor()。該函式將 div 的 id 作為引數。它使用 document.getElementById(id) 選擇元素，並使用 el.style.color = "blue"; 行將元素的字型顏色更改為 blue。因此，我們為 div 分配了一個 JavaScript 函式並使其可點選。
使用純 JavaScript 將 JavaScript 函式附加到 HTML 元素
在最後一種方法中，我們在 HTML 中宣告瞭 onclick 事件處理程式。有一種方法可以保持 HTML 乾淨，並將 JavaScript 函式附加到 div 或相應的 HTML 元素，而無需在 HTML 中指定任何 onclick 事件處理程式。在這裡，我們在 JavaScript 中分配 click 事件，而不是使用 HTML。因此，這種方法純粹基於 JavaScript 並保持 HTML 乾淨。這種程式設計風格稱為 Unobtrusive JavaScript。參考下面的程式碼可以更好地理解這個概念。
<div id="interactive-div" style="cursor: pointer;">Click me</div>
window.onload =
function() {
var el = document.getElementById('interactive-div');
el.onclick = changeMyColor;
}
function changeMyColor() {
var el = document.getElementById('interactive-div');
el.style.color = 'blue';
}
參考上面的程式碼，我們保留了與前面的程式碼示例類似的 HTML。我們沒有在 HTML 中新增任何 onclick 事件處理程式。相反，我們在 JavaScript 中定義了 onclick 事件處理程式，並在 JavaScript 程式碼中附加了相同的函式 changeMyColor。這裡有幾點需要注意：
- 我們在
window.onload中附加了onclick事件偵聽器。如果我們不使用window.onload方法，它會丟擲一個錯誤，提示Uncaught TypeError: Cannot set property 'onclick' of null。發生這種情況是因為document.getElementById("interactive-div")嘗試在載入 HTML 時查詢具有idinteractive-div的元素。由於<script>標籤位於<head>部分，JavaScript 程式碼會在實際載入駐留在<body>標籤中的div之前執行<script>標籤內容。因此，getElementById()函式將找不到該元素並返回null。因此它會丟擲一個錯誤，說它不能將onclick設定為 null。 - 另一點需要注意的是，我們將函式分配給
onclick事件處理程式，而沒有括號()。如果我們寫el.onclick = changeMyColor();而不是el.onclick = changeMyColor;，它將在載入 HTML 時執行函式，這不是我們想要的。因此，我們將changeMyColor的函式引用傳遞給onclick事件處理程式。一旦使用者通過點選div觸發onclick事件，函式呼叫changeMyColor就會發生。div變成藍色。
在 HTML 元素中的 onclick 事件處理程式上定義函式
還有一些方法可以在 onclick 事件上呼叫 JavaScript 函式。我們可以在 HTML 中定義該方法。但這不是推薦的方式，因為它會使 HTML 變得不整潔。參考以下程式碼更好理解。
<div onclick="(function() { alert('hello there'); })()" style="cursor: pointer;">click me!</div>
單擊 div，上面的程式碼將彈出 hello world 文字。在這裡，我們在 HTML 中對函式定義進行了內聯編碼。它是一種匿名內聯方法。我們不能在其他地方使用相同的函式，因為它沒有關聯的名稱。較長的函式定義會很麻煩，並且會使程式碼可讀性變差。
使用 addEventListener 呼叫 JavaScript 函式
新增 onclick 事件處理程式的一種方法是使用 .onclick() 函式。還有另一種更通用的方法，可用於新增更多事件偵聽器。為此，我們使用 JavaScript 的 .addEventListener() 函式。此函式可用於 element、document 介面甚至是 window 物件。我們可以使用 .addEventListener() 函式在觸發特定 event 時設定方法呼叫。
- 引數：它需要幾個強制引數：事件的型別，例如
click等，以及listener函式。listener函式在事件觸發時執行。 - 用法：參考以下程式碼。
<div style="cursor: pointer;" id="interactive-div">click me!</div>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('interactive-div')
.addEventListener('click', function() {
alert('hello');
});
});
這種編碼風格是純粹基於 JavaScript 的非侵入式 JavaScript 程式設計。在這裡，我們使用 .addEventListener() 函式新增了 click 偵聽器，為此，我們必須確保 .getElementById("interactive-div") 返回元素。因此，我們將程式碼包裝在 document 介面的 DOMContentLoaded 事件偵聽器中。否則，程式碼將丟擲一個錯誤，指出它不能將 event 新增到 null 物件。