GlobalEventHandlers.onclick

 

onclick 属性返回当前元素的 click 事件句柄代码。

注意:当你使用 click 事件去触发一个动作时,也要考虑向 keydown 事件添加此动作,以便让不使用鼠标或触屏的用户使用此类动作。

语法

element.onclick = functionRef;

functionRef 是一个函数:通常是在别处声明的函数名或者是一个函数表达式(function expression)。可以查看 "JavaScript Guide:Functions" 了解更多。

传递给指定事件句柄函数的事件对象是一个 MouseEvent。句柄里的 this 值是触发事件的元素。

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>onclick event example</title>
    <script>
      function initElement() {
        var p = document.getElementById("foo");
        // 注意: showAlert(); 或者 showAlert(param); 在这将无效.
        // 其必须是函数的一个引用/函数名,而不是函数调用
        p.onclick = showAlert;
      };

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

或者使用匿名函数,比如:

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

注意

click 事件在用户点击了一个元素时调用。 click 事件发生在 mousedown 和 mouseup 事件之后。

一个 click 句柄在同一时间只能指向惟一的对象。你可能更倾向于使用EventTarget.addEventListener() 的方法,因为这种方法更加灵活,同时也是DOM事件规范格式。

规范

规范 状态 备注
WHATWG HTML Living Standard
onclick
Living Standard  

文档标签和贡献者

 此页面的贡献者: Ende93, Hughie
 最后编辑者: Ende93,