onclick 事件

2023-10-22 18:17| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 JS 参考手册 JS 参考手册（类别排序） JS 参考手册（字母排序） JavaScript JS Array JS Boolean JS Class JS Date JS Error JS Global JS JSON JS Math JS Number JS RegExp JS String JS 对象 JS 运算符 JS 语句 JS 类型化数组 Window Window 对象 Window Console Window History Window Location Window Navigator Window Screen HTML DOM HTML Document HTML Element HTML Attribute HTML Event HTML Event 对象 HTML Collection HTML NodeList HTML DOMTokenList HTML Style Web API API Console API Fetch API Fullscreen API Geolocation API History API MediaQueryList API Storage API Validation API Web HTML 对象 - button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit text time url week
其他参考手册 CSSStyleDeclaration JS 类型转换建站手册网站构建万维网联盟 (W3C) 浏览器信息网站品质语义网职业规划网站主机关于 W3School 帮助 W3School onclick 事件 DOM 事件 MouseEvent 定义和用法
onclick 事件在用户单击元素时发生。
实例
单击按钮时执行 JavaScript：
Click me
亲自试一试

页面下方有更多 TIY 实例。
语法
在 HTML 中：

亲自试一试

在 JavaScript 中：
object.onclick = function(){myScript};
亲自试一试

在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("click", myScript);
亲自试一试

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节冒泡：支持可取消：支持事件类型： MouseEvent 支持的 HTML 标签：所有 HTML 元素，除了：, , , , , , , , , 以及 DOM 版本： Level 2 Events 浏览器支持事件 Chrome IE Firefox Safari Opera onclick 支持支持支持支持支持更多实例实例
单击元素来显示当前日期、日期和时间：
What is the time?
亲自试一试
实例
单击
元素将其文本颜色更改为红色：

Click me to change my text color.
function myFunction() { document.getElementById("demo").style.color = "red"; }
亲自试一试
实例
关于如何通过单击来更改
元素颜色的另一个例子：

Click me to change my text color.
function myFunction(elmnt,clr) { elmnt.style.color = clr; }
亲自试一试
实例
单击按钮将一些文本从输入字段复制到另一个输入字段：
Copy Text function myFunction() { document.getElementById("field2").value = document.getElementById("field1").value; }
亲自试一试
实例把 "onclick" 事件分配给 window 对象： window.onclick = myFunction; // 如果用户在窗口中单击，则将的背景颜色设置为黄色 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 事件
DOM 事件 MouseEvent JavaScript 和 HTML DOM 参考手册 JavaScript 实例 JavaScript 测验 JavaScript 教程
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。

使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

公司简介

联系我们