onclick 事件

DOM 事件 MouseEvent

定義和用法

onclick 事件在用戶單擊元素時發生。

實例

單擊按鈕時執行 JavaScript：

<button onclick="myFunction()">Click me</button>

親自試一試

頁面下方有更多 TIY 實例。

語法

在 HTML 中：

<element onclick="myScript">

親自試一試

在 JavaScript 中：

object.onclick = function(){myScript};

親自試一試

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("click", myScript);

親自試一試

注釋：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技術細節

冒泡： 支持
可取消： 支持
事件類型： MouseEvent
支持的 HTML 標簽： 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title>
DOM 版本： Level 2 Events

瀏覽器支持

事件 Chrome IE Firefox Safari Opera
onclick 支持 支持 支持 支持 支持

更多實例

實例

單擊 <button> 元素來顯示當前日期、日期和時間：

<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>

親自試一試

實例

單擊 <p> 元素將其文本顏色更改為紅色：

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>

親自試一試

實例

關于如何通過單擊來更改 <p> 元素顏色的另一個例子：

<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
  elmnt.style.color = clr;
}
</script>

親自試一試

實例

單擊按鈕將一些文本從輸入字段復制到另一個輸入字段：

<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
  document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

親自試一試

實例

把 "onclick" 事件分配給 window 對象： 
window.onclick = myFunction;
// 如果用戶在窗口中單擊，則將 <body> 的背景顏色設置為黃色
function myFunction() {
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

親自試一試

實例

使用 onclick 創建下拉按鈕：

// 獲取按鈕，當用戶點擊時，執行 myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和刪除 show 類之間切換，用于隱藏和顯示下拉內容 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

親自試一試

相關頁面

JavaScript 教程：JavaScript 事件

HTML DOM 參考手冊：ondblclick 事件

HTML DOM 參考手冊：onmousedown 事件

HTML DOM 參考手冊：onmouseup 事件

DOM 事件 MouseEvent