JavaScript事件处理

最新推荐文章于 2020-03-31 21:48:42 发布
最新推荐文章于 2020-03-31 21:48:42 发布
阅读量116 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42369174/article/details/80658847
版权

事件包括：鼠标事件 ，状态改变事件，键盘事件


鼠标事件：onclick  (鼠标点击触发事件）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button"value="鼠标点击"οnclick="alert('触发')">

</body>
</html>

运行结果

onmouseover(鼠标移到元素上显示）onmouseout(鼠标离开元素）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button"value="鼠标"οnmοuseοver="console.log('在鼠标元素上')"οnmοuseοut="console.log('鼠标离开了')">

</body>
</html>


onmousedown(在元素上按下）onmouseup(在元素上松手）

同上原理这个是点击元素显示  松开元素显示

通过event对象可以获得鼠标触摸页面的坐标



 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: green;
}

</style>

<script type="text/javascript">

function downfn(event){

console.log("鼠标按下了");
console.log("x:"+event.clientX
+" y:"+event.clientY);
}
function upfn(){
console.log("鼠标松开了");
}
</head>
<body>
<div οnmοusedοwn="downfn(event)" 
οnmοuseup="upfn()" οnmοusemοve="movefn()"></div>
</body>
</html>

function movefn(){console.log("鼠标移动了");}</script></head><body><div οnmοusedοwn="downfn(event)" οnmοuseup="upfn()" ></div></body></html>

效果图


键盘事件： onkeydown（键盘按下）  onkeyup （键盘松开）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function keydownfn(event){
		
		var code = 
			window.event ? event.keyCode:event.which;
		console.log("键盘按下:"+code);
		//把编码转换成字符
		var str = String.fromCharCode(code);
		console.log(str);
		
		//通过字符规律判断是否是数字 48-57 为数字
		if(code>=48&&code<=57){
			return true;
		}else{
			return false;
		}
	}
	/* 加载完成事件  */
	onload = function(){
		var mybtn = 
			document.getElementById("mybtn");
		/* 绑定事件  */
		mybtn.onclick = function(){
			alert("按钮事件绑定成功！");
		}
	}
</script>
</head>
<body>
<input type="text" οnkeydοwn="return keydownfn(event)"> 

<input id="mybtn" type="button" 
		value="动态绑定">
</body>
</html>

事件的绑定
1. 在元素中添加事件 

<input type="text" οnkeydοwn="return keydownfn(event)"> 

2. 通过js代码动态绑定事件，好处：html代码和JS代码分离便于维护和升级

var mybtn = 
document.getElementById("mybtn");
/* 绑定事件  */
mybtn.onclick = function(){
alert("按钮事件绑定成功！");
}


状态改变事件：onchange(值发生改变的事件) 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function upperCase(x){
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名：<input type="text" id="fname" οnchange="upperCase(this.id )" />
</body>
</html>
onload(页面加载完事件) 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	οnlοad=function ym(){
		alert("页面加载完毕");
	}
</script>
</head>
<body>
<input type="text" id="fname" οnlοad="ym()" />
</body>
</html>

刷新界面 界面加载完成弹出



onblur(失去焦点) onfocus(得到焦点的事件)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myFunction(){
	console.log("得到焦点")
}
function sq(){
		console.log("失去焦点");
	}
</script>
</head>
<body>
<input type="text" οnfοcus="myFunction()"οnblur="sq()">
</body>
</html>



 onsubmit(当表单提交的时候)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
<form name="testform" οnsubmit="alert('Hello ' + testform.fname.value +'!')">
What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

通过event获取事件源

//获得事件的 事件源 也就是按钮   target:目标
//alert(event.target.nodeName);
//考虑浏览器兼容性问题 个别浏览器不支持target
//alert(event.srcElement.nodeName);
//以下写法有一种成功就可以 
var obj = event.target||event.srcElement;
alert(obj.nodeName);
qq_42369174
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript事件
weixin_58562753的博客
11-24 65
1.onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /* */ // o
常用JavaScript触发事件
ade61966的博客
11-12 321
事件句柄 onclick=JavaScript；鼠标单击某个对象。3 ondblclick=JavaScript；鼠标双击某个对象。3 onmousedown=JavaScript；某个鼠标键被按下。4 onmouseup=JavaScript；某个鼠标键松开。4 onmousemove=JavaScript；鼠标被移动。3 onmouseout=JavaScript；鼠标从...
JavaScript之键盘事件和触摸事件
qq_44531034的博客
03-31 384
键盘事件：与按键相关的事件 键盘事件，不能绑定给某个标签 必须是window或者document keydown：按下事件，如果按住不放，就会一直触发 keyup：放开事件 1.window.οnkeydοwn=function(){} 2.document.οnkeydοwn=function(){} 必须是可以被选中的标签，可以获取焦点的标签 input,select,textarea,but...
文本框限制输入类型<input>的输入框
weixin_30824277的博客
07-05 405
　　最近在开发完一个项目后，又测试人员测试bug，然后我根据他们测试出来的bug一个一个的改，然后就遇到了一个问题，文本框是用来搜索，但是，比如这个文本框是用来搜索年龄的区间，输入条件的时候，如果输入了非数字的字符就不能输入。像这样的问题，其实可以通过正则表达式来做的，我们开发的项目中是已经有相应的正则表达式的验证，但是这个框架里做起来不那么容易，于是就用了这个方法，这个方法也许不是最好的，但是能...
JS中键盘事件的那些事
浦东余春娇
09-15 564
键盘事件 键盘事件一般加给document：document.οnkeydοwn=function(eve){ var e= eve || window.event; console.log(e.altkey) } 识别ASCII码按键事件：obj.οnkeydοwn=function(eve){ var e = eve || window.event if(e.keyCode == ASCII码...
《JavaScript学习笔记》：键盘事件
wojiushimogui的博客
06-06 1106
《JavaScript学习笔记》：键盘事件上篇博文介绍了鼠标事件，本篇博文介绍下键盘事件，键盘事件有：键按下(onkeydown)和键弹起(onkeyup).虽然只有键盘只有两种事件，但是，在用途还是相当广的，例子，在我们的qq聊天界面中，我们写好消息好，我们一般有三种方式来进行发送，如下：1、点击”发送”按钮2、enter3、ctrl+enter后面两种就是键盘事件，前面一种是鼠标点击事件。要说明
JavaScript 事件处理 事件绑定 示例代码
06-27
JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件...
浅谈 javascript 事件处理
10-24
本文向大家简单介绍了javascript的事件处理机制，从事件源，事件操作到事件处理程序都做了简单介绍，并给出了部分示例，这里推荐给大家。
javascript 事件处理示例分享
10-24
主要介绍了javascript 事件处理示例分享,需要的朋友可以参考下
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码
06-27
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...
JavaScript 事件处理 二级菜单级联 示例代码
最新发布
06-27
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
JavaScript事件处理程序详解
10-19
主要为大家详细介绍了JavaScript事件处理程序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript 事件处理程序介绍
10-28
javascript 事件处理程序介绍，学习js的朋友可以参考下
input的onchange事件实际触发条件与解决方法
热门推荐
weixin_34014277的博客
12-28 1万+
  input中onchange事件已经属于元老级别了，并且现在同onclick一样使用频率很高，然而onchange的机制实际上有很多童鞋并不清楚，我们通过实例来分析这个事件的特征。 触发onchange 首先页面有一个input标签，并且已绑定onchange事件，如： 1&lt;input type="text" onchange="console.log(this.val...
JavaScript 事件处理 下拉列表和可选项 示例代码
06-27
JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...
JavaScript事件处理程序(事件侦听器)
10-28
JavaScript事件处理程序，也称为事件侦听器，是JavaScript与HTML交互的核心机制，它使得页面元素能够对用户的操作或浏览器的特定行为作出响应。事件可以是用户触发的，如点击按钮（click）、移动鼠标（mouseover），...
JavaScript事件处理的方式(三种)
11-25
一、什么是JavaScript事件？ 事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。 事件可能是用户在某些内容上的点击、鼠标经过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值