JavaScript onclick事件使用方法详解


Posted in Javascript onMay 15, 2020

onclick是一个事件,当事件被触发时就会执行处理,onclick是一个处理鼠标点击的事件。本篇文章就给大家分享关于JavaScript中onclick事件的用法。

JavaScript onclick事件使用方法详解

我们首先来看一下onclick事件的语法

以下是如何使用onclick事件编写。

使用document.getElementById()在文档中指定id元素,并使用function(){}处理单击该元素时发生的事件。

document.getElementById("button").onclick = function() {
 // 设置在此处单击#button时要发生的事件
};

我们来看具体的示例

以下是使用onclick事件的示例。

单击按钮时更改文字

HTML代码

<div><p>点击</p></div>

CSS代码

#text-button {
 display: block;
 cursor: pointer;
 width: 160px;
 text-align: center;
 border: 1px solid #232323;
}

JavaScript代码

document.getElementById("text-button").onclick = function() {
document.getElementById("text").innerHTML = "我点击了!";
};

浏览器上显示结果如下

JavaScript onclick事件使用方法详解

当点击这个方框后,就会显示如下效果:方框中文字改变了

JavaScript onclick事件使用方法详解

点击方框时,方框背景颜色改变

HTML代码

<div id="square-button"></div>

CSS代码

#square-button {
 width: 80px;
 height: 80px;
 background: #232323;
}
#square-button.blue {
 background: #21759b;
}
JavaScript代码
 
document.getElementById("square-button").onclick = function() {
 this.classList.toggle("blue");
};

浏览器上显示如下效果:是一个黑色的方框

JavaScript onclick事件使用方法详解

当点击这个方框后,颜色就会改变,显示效果如下

JavaScript onclick事件使用方法详解

显示表单中输入的内容

HTML代码

<p>你叫什么名字?</p>
<input type="text" id="name">
<button type="button" id="form-button">输入</button>
<div id="form-text"></div>

CSS代码

:focus {
 outline: 1px solid #666;
}
input[type="text"] {
 margin: 0 0 15px;
 padding: 8px 10px;
 border: 1px solid #d0d1d3;
}
button {
 padding: 8px 15px;
 background: #979380;
 color: #fff;
 border: none;
}

JavaScript代码

document.getElementById("form-button").onclick = function() {
 document.getElementById("form-text").innerHTML = "你好 " + document.getElementById("name").value + " 同学!";
}

浏览器上显示效果如下

JavaScript onclick事件使用方法详解

当你在文本框中输入一个名字,比如张三,然后点击输入将会显示如下效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 #Javascript
用Angular实现一个扫雷的游戏示例
May 15 #Javascript
Node.js API详解之 dns模块用法实例分析
May 15 #Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 #Javascript
js实现简单贪吃蛇游戏
May 15 #Javascript
Javascript执行流程细节原理解析
May 14 #Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 #Javascript
You might like
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
Python读写文件方法总结
2015/06/09 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python的数学算法函数及公式用法
2020/11/18 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
工商管理专业自荐信
2014/06/03 职场文书
企业员工薪酬方案
2014/06/04 职场文书
常务副总经理任命书
2014/06/05 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
环保守法证明
2015/06/24 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android