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 |