最新的Web開發教程
 

onclick事件

事件對象參考 事件對象

例

執行JavaScript的一個按鈕被點擊時：

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

更多"Try it Yourself"下面的例子。

定義和用法

當用戶點擊一個元件上發生的onclick事件。

瀏覽器支持

事件
onclick 是 是 是 是 是

句法

在HTML：

< 試一試»

在JavaScript：

object .onclick=function(){ 試一試»

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

object .addEventListener("click", myScript );
試一試»

注意： addEventListener()在Internet Explorer 8和更早版本不支持的方法。

技術細節

泡沫： 是
取消： 是
事件類型： 的MouseEvent
支持的HTML標籤： 所有的HTML元素，除了：<基數>，<BDO>，點擊<HEAD>，<HTML>，<IFRAME>，<META>，<param>的<SCRIPT>，<STYLE>和<title>
DOM版本： 2級事件
例子

更多示例

例

單擊一個上<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 id="demo" 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.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
試一試»

例

使用的onclick創建一個下拉按鈕：

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
試一試»

相關頁面

HTML DOM參考： onfocus此事件

HTML DOM參考： onmousedown事件事件

HTML DOM參考： onmouseup事件

<事件對象