目录

onclick 事件

❮上一节活动参考下一节❯

示例

单击按钮时调用函数：

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

亲自试一试 »

下面有更多示例。

描述

这个onclick当用户发生事件时单击 HTML 元素。

鼠标事件

Event	Occurs When
onclick	The user clicks on an element
oncontextmenu	The user right-clicks on an element
ondblclick	The user double-clicks on an element
onmousedown	A mouse button is pressed over an element
onmouseenter	The pointer is moved onto an element
onmouseleave	The pointer is moved out of an element
onmousemove	The pointer is moving over an element
onmouseout	The mouse pointer moves out of an element
onmouseover	The mouse pointer is moved over an element
onmouseup	The mouse button is released over an element

也可以看看：

鼠标事件对象

教程：

JavaScript 事件

语法

在 HTML 中：

< element onclick=" myScript">

亲自试一试 »

在 JavaScript 中：

object.onclick = function(){ myScript};

亲自试一试 »

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("click", myScript);

亲自试一试 »

技术细节

气泡：	是的
可取消：	是的
事件类型：	鼠标事件
支持的 HTML 标签：	除：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 和 <title> 之外的所有内容

更多示例

单击<按钮>显示日期：

<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>

亲自试一试 »

单击 <h3> 元素更改文本颜色：

<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>

<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>

亲自试一试 »

关于如何更改元素颜色的另一个示例：

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

<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>

亲自试一试 »

单击可将文本从一个输入字段复制到另一个输入字段：

<button onclick="myFunction()">Copy Text</button>

function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

亲自试一试 »

如何将 "onclick" 事件分配给窗口对象：

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
Yes	Yes	Yes	Yes	Yes	9-11

❮上一节活动参考下一节❯