JavaScript onclick() 事件 - 教程，帶示例
JavaScript 為網頁增加交互性。 本文向您展示瞭如何在使用 onclick() 單擊 HTML 元素時觸發 JavaScript 函數 事件和屬性。包含代碼示例。
JavaScript 事件
一個事件 在 JavaScript 中只是意味著發生了一些事情。鼠標移動了，或者一個鍵被按下了，並且 JavaScript 已經通過引發一個 事件 得到通知 .
點擊 事件
當用戶點擊某物時，onclick 引發事件，允許您在單擊元素時觸發一些 JavaScript 代碼。
定義onclick 活動
有幾種方法可以定義 onclick 事件，如下所述。
內嵌 HTML
第一種方法是簡單地將 JavaScript 代碼放在 HTML 標記內的 onclick 屬性中，用於您希望使其可點擊的元素：
<element onclick="myFunction">
注意：
示例
<a href="#" onclick="alert("You clicked me!");">Click me!</a>
上面定義了一個 HTML 鏈接。通常，href 屬性指向另一個網站或頁面的地址，但在這種情況下，它被設置為 # – 意味著它無處可去。
點擊 添加了屬性，會彈出一個 JavaScript 警報。
單擊鏈接時，會觸發 onclick 事件，並顯示警報。
事件處理程序
將您的 JavaScript 代碼與 HTML 代碼分開可以使您的代碼整體上更易於管理——在調試或更新 JavaScript 邏輯時，您不必在 HTML 中尋找。以下方法將 onclick 分開 完全事件處理程序：
object.onclick = function(){myFunction}; 注意：
- 對象 是對您希望使其可點擊的 HTML 元素的引用
- 我的函數 是您希望在單擊時執行的代碼
示例
<button id="clickable">Click me!</button>
<script>
document.getElementById("clickable").onclick = function() {alert("You clicked me!");};
</script> 如您所見，所有的 JavaScript 現在都在同一個地方，因此您可以準確地看到發生了什麼。 HTML部分只包含要顯示給用戶的元素——邏輯是分開的。
事件監聽器
事件監聽器可用於實現與上述相同的目的——將 JavaScript 邏輯與 HTML 佈局分開。
object.addEventListener("click", myFunction); 示例
<button id="clickable">Click me!</button>
<script>
document.getElementById("clickable").addEventListener("click", alert("You clicked me!"));
</script> onclick() 的一種常見用法 是在網絡瀏覽器中刷新頁面。
要了解有關使用 JavaScript 向網頁添加交互性的更多信息，請查看 Mozilla 開發者文檔。
