javascript 按钮点击事件

最新推荐文章于 2024-05-25 11:24:08 发布
最新推荐文章于 2024-05-25 11:24:08 发布
阅读量7.8w 收藏 66
点赞数 12
分类专栏： javascript 按钮点击
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ftd1314/article/details/80530366
版权
    

这个部分主要来讲解一下按钮点击事件的集中js的实现方式：

方法一：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>test1</title>  
  6.     <script>  
  7.         function buttonClick(){  
  8.             alert("你点击了按钮哦");  
  9.         }  
  10.     </script>  
  11. </head>  
  12. <body>  
  13. <input  id="button" type="button" value="点击" onclick="buttonClick();">  
  14. </body>  
  15. </html>  

方法二：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>test1</title>  
  6.   
  7. </head>  
  8. <body>  
  9. <input  id="button" type="button" value="点击" >  
  10. <script>  
  11.     var btn = document.getElementById("button");  
  12.     btn.onclick =function(){  
  13.         alert("你点击了按钮哦！");  
  14.     }  
  15. </script>  
  16. </body>  
  17. </html>  

对于方法二，一定要把script代码块写在body的尾部，但是如果说硬是要写在head标签内的话，一定要在window.load里面，或者在jq的另一种写法$(document).ready()。 如下方代码所示。这个是代码执行顺序的原因。

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>test1</title>  
  6.   
  7.     <script>  
  8.         window.onload = function(){  
  9.             var btn = document.getElementById("button");  
  10.             btn.onclick =function(){  
  11.                 alert("你点击了按钮哦！");  
  12.             }  
  13.         }  
  14.     </script>  
  15. </head>  
  16. <body>  
  17. <input  id="button" type="button" value="点击" >  
  18. </body>  
  19. </html>  
方法三：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>test1</title>  
  6.     <script>  
  7.         window.onload = function(){  
  8.             var btn = document.getElementById("button");  
  9.             btn.addEventListener('click',function() {alert('你点击了按钮哦！')},false);  
  10.         }  
  11.     </script>  
  12. </head>  
  13. <body>  
  14. <input  id="button" type="button" value="点击" >  
  15. </body>  
  16. </html>  
ftd5621
关注
  • 12
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
JavaScript给按钮绑定点击事件（onclick）的方法
12-29
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> [removed] function displayDate() { document.getElementById(demo)[removed]=Date(); } [removed] </head> <body> <h1>My First JavaScript</h1> <p id=demo>This is a paragraph.</
JSP按钮事件
11-20
该文档为JSP普通button的操作，对初学jsp有很大的帮助。
js实现按钮切换
qq_59599812的博客
09-08 1600
js实现按钮切换
Java基础
最新发布
05-25 467
抽象的，不是真实存在的第一次使用类内容时，通过CLASSPATH类路径找到字节码文件，将字节码文件中的内容加载到虚拟机中的过程，称之为类加载，通常情况下，类加载只会发生一次运行时异常：继承RuntimeException构造：无参构造+有参构造有参构造目的为给父类中声明的详细信息属性赋值非运行时异常：继承Exception内容：构造要求与运行时一致自定义类型必须实现java.io.Serializable接口，意为该类允许被序列化序列化：拆分对象信息的过程。
JavaScript 按钮事件
yixiaobing的博客
02-26 423
请点击我
jsp中，一个button onclick跳转
校尉的博客
09-04 2万+
1、jsp中，一个button onclick跳转 方式一：onclick="window.location='new.jsp'"。 onclick="openpage()" 方式二： JavaScript">   function openpage(){       window.location.replace("/new.jsp");   }
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
风吹落叶的博客
02-18 2932
样式解析汇总：这段代码描述了一个在页面中居中显示、具有白色背景、灰色边框和一定内边距的固定定位元素，且在层叠顺序中处于较高的位置。：设置元素在层叠顺序中的位置为1000，使其位于具有较低 z-index 值的元素之上。：设置元素的定位方式为固定定位，元素相对于浏览器窗口固定位置，不随页面滚动而移动。：设置元素的边框为1像素宽的实线边框，颜色为淡灰色（#ddd）。：设置按钮内容与按钮边框之间的内边距，上下为10像素，左右为20像素。：将元素左边缘定位在距离父元素左边缘50%的位置，即居中水平定位。
JavaScript常用事件详解
weixin_54535063的博客
11-16 377
概念：某些组件被执行了某些操作后，会触发某些特定的代码的执行。事件：鼠标右击，鼠标左击，鼠标移动，双击，键盘方向键被触发等。事件源：组件。如： 按钮 文本输入框…监听器：代码。注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
js单击/双击/三击，长按/单击
wt102的博客
03-08 434
之前写项目的时候遇到了一个这样的需求，对于页面上的一个元素做单击/长按，触发不同事件，后面考虑到鲁棒性还是换成单击/双击/三击的形式了，不过这些事件之间的区分给人的印象还是深刻的（其实就是卡在这里太久了，乐），写篇文章记录一下。
js(jquery)绑定点击事件
美丽的泡沫
07-22 2万+
test 第一种 $("#test").click(function(event) { /* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false); 第三种 html
javascript实现点击后变换按钮显示文字的方法
10-24
在JavaScript编程中，有时我们需要实现一个功能，使得用户点击按钮后，按钮的显示文字会发生变化。这在交互式用户界面中十分常见，可以提供更好的用户体验。本教程将详细讲解如何利用JavaScript来实现这样一个功能，...
JavaScript 模拟用户单击事件
10-29
单击一个按钮或超链接，然后会出现其他的超链接，这时要让其中的一个超链接被单击，以显示一个初始页面。（公司页面使用了frameset）很显然，之后的超链接单击事件需要通过JavaScript来触发。
JavaScript中点击事件的写法
10-22
本篇文章将深入探讨JavaScript中三种常见的点击事件写法，以及如何通过JavaScript模拟触发按钮点击事件。 ### 1. 内联事件处理 这是最基础的事件处理方式，直接在HTML元素中通过`onclick`属性指定一个函数或语句块...
Javascript处理最基本的Button点击事件
qq_46358639的博客
02-19 4003
今天学到的新知识：如何用JavaScript处理一个最基本的Button点击事件 总结： 用document.getElementById()得以通过元素ID访问元素 使用.onclick属性处理点击事件 过程： 1.先建立一个最基本的HTML页面： <html lang="en"> <head> <meta charset="UTF-8">...
js_button按钮_隐藏_显示
热门推荐
icecoola_的博客
07-31 5万+
1 隐藏 $(&quot;#btnId&quot;).attr(&quot;style&quot;,&quot;display:none;&quot;); $(&quot;#btnId&quot;).attr(&quot;style&quot;,&quot;display:block;&quot;);
javascript动态生成按钮并绑定点击事件
海峰的博客
10-07 4万+
前一个多月公司的前端开发人员离职，公司一直在招前端，基本上每天都有几个来面试的人，就这个面试频率，也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础，但也很考基本功，基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线，修改bug，一直没时间。现在国庆节放假，发了一天时间把前端又看了下，然后理所当然的就写出来了，功
给submit提交按钮添加点击事件（JavaScript）
WDS的博客
03-17 3万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head> <body> <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label> <button id="button
javascript按钮点击事件
10-09
JavaScript中的按钮点击事件有几种不同的触发方式。其中，`onclick`事件是在点击鼠标时触发，而`ondblclick`事件是在双击鼠标时触发。这两个事件的区别在于双击事件需要连续点击两下。此外，还有`onkeyup`事件，它是在放开键盘上的某个按键时触发。当键盘放开后再次点击时，对话框将会收回。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值