onclick 事件
页面下方有更多实例。
定义和用法
onclick 事件在用户单击元素时发生。
浏览器支持
| 事件 | |||||
|---|---|---|---|---|---|
| onclick | Yes | Yes | Yes | Yes | Yes |
语法
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 是否支持冒泡: | Yes |
|---|---|
| 是否支持取消: | Yes |
| 事件类型: | MouseEvent |
| 支持的 HTML 标签: | 所有 HTML 元素，除了： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
| DOM 版本: | Level 2 Events |
更多实例
实例
单击 <button> 元素来显示当前日期、日期和时间：
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
亲自试一试 »
实例
单击 <p> 元素将其文本颜色更改为红色：
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
亲自试一试 »
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
实例
关于如何通过单击来更改 <p> 元素颜色的另一个例子：
<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
亲自试一试 »
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
实例
单击按钮将一些文本从输入字段复制到另一个输入字段：
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
亲自试一试 »
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
实例
把 "onclick" 事件分配给 window 对象：
window.onclick = myFunction;
// 如果用户在窗口中点击，将 <body> 的背景颜色设置为黄色
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
亲自试一试 »
// 如果用户在窗口中点击，将 <body> 的背景颜色设置为黄色
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
实例
使用 onclick 创建下拉按钮：
// 获取按钮，当用户点击时，执行myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和删除显示类之间切换，用于隐藏和显示下拉内容 */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
亲自试一试 »
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和删除显示类之间切换，用于隐藏和显示下拉内容 */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
相关页面
JavaScript 教程: JavaScript Events
HTML DOM 参考手册: ondblclick 事件
HTML DOM 参考手册: onmousedown 事件
HTML DOM 参考手册: onmouseup 事件
