onclick 事件
描述
onclick 事件在用户点击 HTML 元素时发生。
鼠标事件
| 事件 | 发生时间 |
|---|---|
| onclick | 用户点击元素 |
| oncontextmenu | 用户右键点击元素 |
| ondblclick | 用户双击元素 |
| onmousedown | 鼠标按钮在元素上被按下 |
| onmouseenter | 指针移入元素 |
| onmouseleave | 指针移出元素 |
| onmousemove | 指针在元素上移动 |
| onmouseout | 鼠标指针移出元素 |
| onmouseover | 鼠标指针移到元素上 |
| onmouseup | 鼠标按钮在元素上被释放 |
另请参阅
教程
语法
技术详情
| 冒泡 | 是 |
|---|---|
| 可取消 | 是 |
| 事件类型 | MouseEvent |
| 支持 HTML 标签 |
除以下元素外所有元素都支持：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 和 <title> |
更多示例
点击 <button> 显示日期
<button onclick="getElementById('demo').innerHTML = Date()">现在几点了？</button>
自己动手试一试 »
点击 <h3> 元素来改变文本颜色
<h3 id="demo" onclick="myFunction()">点击我来改变我的颜色。</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
自己动手试一试 »
另一个改变元素颜色的例子
<h3 onclick="myFunction(this, 'red')">点击我来改变我的颜色。</h3>
<script>
函数 myFunction(element, color) {
element.style.color = color;
}
</script>
自己动手试一试 »
点击从一个输入字段复制文本到另一个字段
<button onclick="myFunction()">复制文本</button>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
自己动手试一试 »
如何将 "onclick" 事件分配给 window 对象
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
自己动手试一试 »
使用 onclick 创建下拉菜单
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
自己动手试一试 »
浏览器支持
onclick 是 DOM Level 2 (2001) 的一个特性。
所有浏览器都完全支持。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
