onclick 事件

定义和用法

onclick 事件在用户单击元素时发生。

实例

单击按钮时执行 JavaScript:

<button onclick="myFunction()">Click me</button>

亲自试一试

页面下方有更多 TIY 实例。

语法

在 HTML 中:

<element onclick="myScript">

亲自试一试

在 JavaScript 中:

object.onclick = function(){myScript};

亲自试一试

在 JavaScript 中,使用 addEventListener() 方法:

object.addEventListener("click", myScript);

亲自试一试

注释:Internet Explorer 8 或更早的版本不支持 addEventListener() 方法

技术细节

冒泡: 支持
可取消: 支持
事件类型: MouseEvent
支持的 HTML 标签: 所有 HTML 元素,除了:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title>
DOM 版本: Level 2 Events

浏览器支持

事件 Chrome IE Firefox Safari Opera
onclick 支持 支持 支持 支持 支持

更多实例

实例

单击 <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>

亲自试一试

实例

关于如何通过单击来更改 <p> 元素颜色的另一个例子:

<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<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>

亲自试一试

实例

把 "onclick" 事件分配给 window 对象:
window.onclick = myFunction;

// 如果用户在窗口中单击,则将 <body> 的背景颜色设置为黄色
function myFunction() {
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

亲自试一试

实例

使用 onclick 创建下拉按钮:

// 获取按钮,当用户点击时,执行 myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction 在添加和删除 show 类之间切换,用于隐藏和显示下拉内容 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

亲自试一试

相关页面

JavaScript 教程:JavaScript 事件

HTML DOM 参考手册:ondblclick 事件

HTML DOM 参考手册:onmousedown 事件

HTML DOM 参考手册:onmouseup 事件