加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

onclick 事件

JavaScript基础 2022-06-08 11:57:41小码哥的IT人生shichen

onclick 事件

DOM 事件 MouseEvent

实例

单击按钮时执行 JavaScript：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>onclick 事件</h1>
<p>onclick 事件用于在单击元素时触发函数。</p>
<p>单击按钮触发一个函数，该函数将在 id="demo" 的 p 元素中输出 "Hello World"。</p>
<button onclick="myFunction()">点击我</button>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

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

浏览器支持

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

语法

在 HTML 中：

<element onclick="myScript">

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>本例演示如何将 "onclick" 事件分配给 p 元素。</p>
<p id="demo" onclick="myFunction()">点击我.</p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

在 JavaScript 中：

object.onclick = function(){myScript};

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>本例使用 HTML DOM 将 "onclick" 事件分配给 p 元素。</p>
<p id="demo">点击我.</p>
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

object.addEventListener("click", myScript);

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>本例使用 addEventListener() 方法将 "click" 事件附加到 p 元素。</p>
<p id="demo">点击我.</p>
<script>
document.getElementById("demo").addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

技术细节

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

更多实例

示例代码：

单击 <button> 元素来显示当前日期、日期和时间：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击按钮可显示时间。</p>
<button onclick="getElementById('demo').innerHTML=Date()">现在是什么时间？</button>
<p id="demo"></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

单击 <p> 元素将其文本颜色更改为红色：

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>

完整实例：

<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">点击我可改变文本颜色。</p>
<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
  elmnt.style.color = clr;
}
</script>

完整实例：

<!DOCTYPE html>
<html>
<body>
<p onclick="myFunction(this, 'red')">点击我可改变我的文本颜色。</p>
<script>
function myFunction(elmnt,clr) {
  elmnt.style.color = clr;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

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

完整实例：

<!DOCTYPE html>
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="myFunction()">复制文本</button>
<p>单击按钮时会触发一个函数。该函数将文本从 Field1 复制到 Field2。</p>
<script>
function myFunction() {
  document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

把 "onclick" 事件分配给 window 对象： 
window.onclick = myFunction;
// 如果用户在窗口中单击，则将 <body> 的背景颜色设置为黄色
function myFunction() {
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>本例演示如何将 "onclick" 事件分配给 window 对象。</p>
<p>单击此窗口中的任意位置可更改 body 的背景颜色。</p>
<script>
window.onclick = myFunction;
function myFunction() {
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

使用 onclick 创建下拉按钮：

// 获取按钮，当用户点击时，执行 myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和删除 show 类之间切换，用于隐藏和显示下拉内容 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

完整实例：

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<h2>可点击的下拉菜单</h2>
<p>单击按钮打开下拉菜单。</p>
<div class="dropdown">
  <button id="myBtn" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<script>
// 获取按钮，当用户点击时，执行 myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和删除 show 类之间切换，用于隐藏和显示下拉内容 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

DOM 事件 MouseEvent

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024