关闭

javascript怎么判断按钮被点击?

时间: 2019-11-28阅读: 1232标签: js知识

JavaScript可以通过Event对象的target事件或srcElement(IE浏览器支持)来判断按钮是否被点击。Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。


JavaScript判断按钮是否被点击:

firfox版:

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<HEAD> 
<TITLE></TITLE> 
<script> 
document.onclick=function(e){ 
var evt=e||window.event; 
var tar=evt.target||evt.srcElement; 
if( (tar.tagName.toLowerCase()=="input"&&tar.type=="button")||tar.tagName.toLowerCase()=="button")
{ 
alert("你点击的是一个按钮") 
} 
} 
</script> 
</HEAD> 
<BODY> 
<input id="button1" type="button" value="1111"/> 
<input id="button2" type="button" value="2222"/> 
<input id="button3" type="button" value="3333"/> 
<input id="button4" type="button" value="4444"/> 
</BODY> 
</HTML>

2、google 浏览器版:

<HTML> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<HEAD> 
<TITLE></TITLE> 
<script> 
document.onclick=function()
{ var obj = event.srcElement; 
if(obj.type == "button"){ 
alert(obj.id); } 
} 
</script> 
</HEAD> 
<BODY> 
<div>
<input id="button1" type="button" value="1111"/> 
<input id="button2" type="button" value="2222"/> 
<input id="button3" type="button" value="3333"/> 
<input id="button4" type="button" value="4444"/> 
</div>
</BODY> 
</HTML>


Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!


target 事件

target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

语法

event.target


srcElement

srcElement:对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/7993

js中offset、scroll、event、client的区别和使用

用一句话概述:offset用于获取元素的实际显示尺寸 , scroll用于获取滚动后全部尺寸 , client用于获取不包括滚动条的实际显示尺寸,event用于获取鼠标的坐标位置。下面就详细介绍它们之间的使用和区别

基于规则评分的密码强度检测算法分析及实现(JavaScript)

用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差。那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法

classList的使用,原生js对class的添加,删除,修改等方法的总结,以及兼容操作

classList是一个DOMTokenList的对象,用于在对元素的添加,删除,以及判断是否存在等操作。以及如何兼容操作

js浮点数精度丢失问题_如何解决js中浮点数计算不精准?

理解javascript中浮点数计算不精准的原因,如何解决浮点数的四则运算(加减乘除)。js中除了toFixed方法以外的实现方法总汇

JavaScript中奇特的~运算符

本次分享一下并不是很常用的按位非运算符~的原理以及一点点用法。产生式 UnaryExpression : ~ UnaryExpression 按照下面的过程执行:令 expr 为解释执行 UnaryExpression 的结果。令 oldValue 为 ToInt32(GetValue(expr))。返回 oldValue 按位取反的结果。

Performance_js中计算网站性能监控利器

Performance提供的方法可以灵活使用,获取到页面加载等标记的耗时情况。Performance.timing属性对象提供了浏览器从打开网页到加载完成之间各个节点的耗时数据,包括重定向开始、DNS查询、浏览器响应数据、DOM解析等相关节点

适配器在JavaScript中的体现

适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题、整合多个第三方SDK的调用,都可以看到它的身影。适配器模式是一种软件设计模式,允许从另一个接口使用现有类的接口。它通常用于使现有的类与其他类一起工作,而无需修改其源代码。

Js输出方式有哪些?

在编写JavaScript代码的时候, 一定要记住每一句代码后面都需要添加一个分号, 并且这个分号必须是英文的分号,我们会发现有时候不写分号程序也能够运行, 这里并不是因为不需要分号, 而是浏览器自动帮助我们添加了分号

Js如何获取ul中li的个数?

javascript如何获取ul中li的个数?下面本篇文章就来给大家介绍一下使用javascript获取ul中li个数的方法,希望对大家有所帮助。

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!