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 |