onclick 屬性回傳當前元件 click 事件處理器的程式碼(event handler code)。

注意: 當使用 click 事件觸發動作時,同時考慮將此動作加到 keydown 事件中,讓沒使用滑鼠或使用觸控螢幕的使用者也可以進行此動作。


element.onclick = functionRef;

此處的 functionRef 為一個函式-通常是函式的名字或是函式表示式(function expression) 見 "JavaScript Guide:Functions" 來了解更多。

傳入事件處理函式(event handler function)的唯一引數為 MouseEvent 物件。在這函式中,this 為觸發此事件的元件。


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>onclick event example</title>
      function initElement() {
        var p = document.getElementById("foo");
        // NOTE: showAlert(); or showAlert(param); will NOT work here.
        // Must be a reference to a function name, not a function call.
        p.onclick = showAlert;

      function showAlert(event) {
        alert("onclick Event detected!");
      #foo {
        border: solid blue 2px;
  <body onload="initElement();">
    <span id="foo">My Event Element</span>
    <p>click on the above element.</p>


p.onclick = function(event) { alert("moot!"); };


使用者點擊元件時會觸發 click 事件。click 事件發生在 mousedown 及 mouseup 事件之後。

這個屬性同一時間中只能指定一個 click 處理器(handler)。你也許會比較想使用 EventTarget.addEventListener() (en-US),因為它有更多的彈性而且是 DOM 事件規範的一部份。


規範 狀態 備註
HTML Living Standard
The definition of 'onclick' in that specification.
Living Standard  


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) ? ? ? ?
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ? ? ?