JavaScrip（10）_事件

最新推荐文章于 2022-11-24 19:39:03 发布
最新推荐文章于 2022-11-24 19:39:03 发布
阅读量247 收藏 1
点赞数
分类专栏： JavaScript（更新完） 文章标签： JavaScript 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36260974/article/details/103304177
版权

本系列博客汇总在这里：JavaScript 汇总

事件

一、简介

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

二、JavaScript的事件

1、onclick

鼠标点击一个元素时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(obj)
{
	alert(obj.value);
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="myclick(this)">
<input id="b1" type="button" value="点击1">
</body>
<script type="text/javascript">
	document.getElementById("b1").onclick = function()
	{
		alert(1);
	}
</script>
</html>

在这里插入图片描述

2、onblur

使用在表单元素中，当元素失去焦点的时候执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myblur(obj)
{
	var val = obj.value;
	//正则表达式
	var reg = /^\d{3,5}$/;
	if(!reg.test(val))
	{
		document.getElementById("tip").innerHTML = "请输入3到5位的数字";
	}
	else
	{
		document.getElementById("tip").innerHTML = "";
	}
}
</script>
</head>
<body>
<input type="text" onblur="myblur(this)"><span id="tip"></span>
</html>

在这里插入图片描述

3、onchange

使用在表单元素中，当某些东西改变是执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var yn = ["昆明","丽江","大理"];
var gx = ["南宁","崇左","柳州"];
var gz = ["贵阳","遵义","安顺"];
function mych(obj)
{
	var opts = "";
	if(obj.value == 1)
	{
		for(var i = 0; i < yn.length; i++)
		{
			opts = opts + "<option>"+yn[i]+"</option>"
		}
	}
	else if(obj.value == 2)
	{
		for(var i = 0; i < gx.length; i++)
		{
			opts = opts + "<option>"+gx[i]+"</option>"
		}
	}
	else if(obj.value == 3)
	{
		for(var i = 0; i < gz.length; i++)
		{
			opts = opts + "<option>"+gz[i]+"</option>"
		}
	}
	document.getElementById("city").innerHTML = opts;	
}
</script>
</head>
<body>
省：
<select id="province" onchange="mych(this)">
	<option value="">请选择</option>
	<option value="1">云南省</option>
	<option value="2">广西省</option>
	<option value="3">贵州省</option>
</select>
市：
<select id="city" onchange="mych(this)">	
</select>
</html>

在这里插入图片描述

4、ondblclick

鼠标双击一个元素时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//双击
function dblclk()
{
	alert(0);
}
</script>
</head>
<body>
<div style="border: 1px solid black; width: 100px;height: 100px;" ondblclick="dblclk()"></div>
</html>

在这里插入图片描述

5、onfocus

使用在表单元素中，当元素获得焦点时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myfocus(obj)
{
	//可用于当鼠标在表格当中移动时的表格背景颜色的改变
	obj.style.background = "yellow";
}
</script>
</head>
<body>
<input type="text"  onfocus="myfocus(this)"><span id="tip"></span>
</html>

在这里插入图片描述

6、onkeydown

按下某个按键时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">	
function mykd(e)
{
	var keyNum = null;
	var keyChar = null;
	//获得键盘上按下的键对应的ascii码
	keyNum = window.event?e.keyCode : e.which;
	keyChar = String.fromCharCode(keyNum);
	alert(keyNum+"--->"+keyChar);	
}
</script>
</head>
<!-- 
 在页面中获得键盘上按下的键，把事件放在body上
 -->
<body onkeydown="mykd(event)">
</body>
</html>

在这里插入图片描述

7、onkeyup

释放某个按键时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function mykd(e)
{
	var keyNum = null;
	var keyChar = null;
	//获得键盘上按下的键对应的ascii码
	keyNum = window.event?e.keyCode : e.which;
	/*keyChar = String.fromCharCode(keyNum);
	alert(keyNum+"----------->"+keyChar); */
	if(keyNum == 13)
	{
		//通过js来提交表单
		document.getElementById("myform").submit();
	}	
}
</script>
</head>
<!-- 
 在页面中获得键盘上按下的键，把事件放在body上
-->
<body onkeyup="mykd(event)">
<form id="myform" action="xxx.html" method="post">
	用户：<input type="text" name="username" ><br>
	密码：<input type="password" name="password" ><br>
	<input type="submit" value="提交">
</form>
</body>
</html>

在这里插入图片描述

8、onload

在 body 标签中使用，载入页面的时候执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//加载时执行的事件
function myload()
{
	alert(8);
}
</script>
</head>
<!-- 
 在页面中获得键盘上按下的键，把事件放在body上
 -->
<body onload="myload()">
</body>
</html>

在这里插入图片描述

9、onselect

用在表单元素中，当元素被选择时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function mys()
{
	alert(0)
}
</script>
</head>
<body >
爱好:<input type="text" onselect="mys()" name="favor" value="1">
</body>
</html>

在这里插入图片描述

10、onmousedown

按下鼠标按键时执行。

11、onmousemove

鼠标光标在元素上移动时执行。

12、onmouseout

鼠标光标移开元素时执行。

13、onmouseover

鼠标光标移到元素上时执行。

14、onmouseup

当释放鼠标按键时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function md()
{
	alert(0)
}
function mu()
{
	alert(8)
}
function mo()
{
	alert(1)
}
function mout()
{
	alert(2)
}
function mm()
{
	alert(3)
}
</script>
</head>
<body >
<div style="border: 1px solid black; width: 100px;height: 100px;" onmousedown="md()">1</div>
<div style="border: 1px solid black; width: 100px;height: 100px;" onmouseup="mu()">2</div>
<!-- 
	鼠标移动到元素上就触发
 -->
<div style="border: 1px solid black; width: 100px;height: 100px;" onmouseover="mo()">3</div>
<div style="border: 1px solid black; width: 100px;height: 100px;" onmouseout="mout()">4</div>
<div style="border: 1px solid black; width: 100px;height: 100px;" onmousemove="mm()">5</div>
</body>
</html>

在这里插入图片描述

15、onsubmit

用在表单元素中，当表单提交时执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">	
function mykd(e)
{
	//设置是否提交表单的标志
	var isSubmit = true;
	var keyNum = null;
	var keyChar = null;
	//获得键盘上按下的键对应的ascii码
	keyNum = window.event?e.keyCode : e.which;	
	if(keyNum == 13)
	{		
		var reg = /^\d{3,5}$/;
		//获得username
		var username = document.getElementById("username").value;
		//验证username是否合法
		if(!reg.test(username))
		{
			document.getElementById("tip").innerHTML = "请输入3到5位的数字";
			isSubmit = false;
		}
		if(isSubmit)
		{
			//通过js来提交表单
			document.getElementById("myform").submit();
		}		
	}	
} 
function mysubmit()
{
	//设置是否提交表单的标志
	 var isSubmit = true;
	//定义正则表达式
	var reg = /^\d{3,5}$/;
	//获得username
	var username = document.getElementById("username").value;
	//验证username是否合法
	if(!reg.test(username))
	{
		document.getElementById("tip").innerHTML = "请输入3到5位的数字";
		//把提交的标志设置成false
		isSubmit = false;
	}
	return isSubmit;
}
</script>
</head>
<!-- 
 在页面中获得键盘上按下的键，把事件放在body上
 -->
<body onkeyup="mykd(event)">
<!-- 
 onsubmit主要是作用在提交按钮上
 -->
<form id="myform" action="xxx.html" onsubmit="return mysubmit()" method="post">
	用户：<input type="text" name="username" id="username"><span id="tip"></span><br>
	密码：<input type="password" name="password" ><br>
	<input type="submit" value="提交">
</form>	
</body>
</html>

在这里插入图片描述
如有错误，欢迎指正!

魏宇轩
关注
专栏目录
JavaScriptAPI_JS执行机制
JiuMeilove的博客
06-22 2万+
JavaScript执行机制，重点有两点：既然说js是单线程，那就是在执行代码的时候是从上往下执行的，先来看一段代码： javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker, 但javascript是单线程这一核心扔未改变。所以一切javascript版的“多线程”都是用单线程模拟出来的，一切javascript多线程都是纸老虎最初设计JS是用来在浏览器验证表单操控DOM元素的是一门脚本语言，如果js是多线程的，那么两个线程同时对一个DOM元素进行了相互冲突的操作，那么浏览器
JavaScript中 Touch 事件详解
明天也要努力的博客
11-24 5019
touch 事件： touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发； touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动； touchend 事件：在用户从元素上移开手指时会发生。 touchcancel 事件：在触摸事件被中断时发生。不同的设备会在不同的动作中中断触摸事件，如果发生这种“错误”，那么包含此事件来清理代码被认为是一种好习惯。 ...
JavaScript滚轮事件
weixin_43228946的博客
08-21 2890
现在，我们大概看下代码的具体逻辑。首先我们通过id获取div的对象d,接着给给d设置滚动事件 onmousewheel，接着我们要判断滚动的方向，event.wheelDelta > 0表示向上滚，event.detail < 0也表示向上滚，这里需要注意下event.wheelDelta不支持·火狐浏览器。如果我们在有浏览器中，在div里面进行滚动，浏览器的滚动给条也会跟着滚动，这样体验不太好。为了解决这个问题，我们在代码里返回false,就可以解决这个问题。还有一种情况，使用addEventListen
最常用的JavaScript 事件
itzhuzhu的博客
12-07 3212
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
21- JavaScript 事件简介
JayYuen的博客
11-04 3630
事件简介 事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。 JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。 事件的三要素 事件的三要素：事件源、事件、事件驱动程序。 比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。...
JavaScript常用事件及事件句柄-动力节点
weixin_49543720的博客
01-14 1785
1、click事件 鼠标单击事件，事件句柄：onclick 2、dblclick事件 鼠标双击事件，事件句柄：ondblclick 3、blur事件 失去焦点事件，事件句柄：onblur 4、change事件 当文本框、文本域中的文本内容或者下拉列表选中项发生改变时，该事件发生，事件句柄：onchange 5、focus事件 获得焦点事件，事件句柄：onfocus 6、load事件 网页加载完毕后发生，事件句柄：onload，通常编写在body标签当中。 7、keydown事件 键盘按键被按下时发生，可以捕
JavaScript18——触屏事件
小白的学习路
12-13 4101
1.1. 触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果， 但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)，Android 和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指 (或触控笔)对屏幕或者触控板操作。 常⻅的触屏事件如下: 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触
Web基础——JavaScript之事件绑定与事件对象
热门推荐
威威的博客
01-12 1万+
目录1.事件的绑定2.事件的绑定（注意事项）3.失去焦点和获得焦点4.键盘事件5.鼠标事件6.表单事件7.页面加载事件8.下拉框事件9.事件对象10.currentTarget和target的区别11.事件的冒泡现象12.阻止事件冒泡的行为13.元素的默认行为14.事件捕获15.事件委托16.设置元素的自带属性以及设置元素的css样式17.开关案例18.排他思想19.图片跟随鼠标20.定位到搜索框 1.事件的绑定 <!DOCTYPE html> <html> <head&gt
面试题58：javascript中鼠标事件有哪些
qq_51066068的博客
07-08 1583
鼠标事件有： 1、click（单击）事件； 2、dblclick（双击）事件； 3、mousedown事件； 4、mouseup事件； 5、mouseout事件； 6、mouseover事件； 7、mousemove事件； 8、mouseleave事件等。
javascript之10秒倒计时
m7k7k999的博客
11-24 4573
javascript之十秒倒计时,定时器函数,触发事件
jQuery基础知识笔记（五）
青椒的博客
03-20 248
1.项目中常用增加删除列表数据，新增弹框 如图所示 添加数据 删除数据 （div）先建一个整体大框 <div class="wrap"> /*先写一个添加列表元素的按钮*/ <div> <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/> &...
技术笔试面试题(下)
Mr_赵的博客
04-18 4455
【题目编号】 jsd-02-201-5017 【知 识 点】 数据库-Oracle SQL-级联删除、左外连接、SQL基础 【难易程度】 50 【题目描述】 STOMERS表，字段为：ID：（非空，主键）bigint，NAME：（非空）varchar，AGE：int类型；创建ORDERS表，字段为：ID：（非空，主键，）bigint，ORDER_NUMBER：（非空）varchar，PRICE：...
Web前端经典面试题-JavaScript
道阻且长，行则将至。
01-20 551
世人慌慌张张，不过图的是碎银几两，偏偏这碎银几两，能解世间万千惆怅；这几两碎银，可让父母安康，可护幼子成长；但这碎银几两，也断了儿时念想，也让少年染上沧伤，压弯了脊梁。
JavaScript 逆向 ( 一 ) --- JavaScript 语法基础
墨鱼菜鸡
07-11 889
js 逆向：https://www.cnblogs.com/wuxianyu/category/1940304.html js逆向2：https://www.cnblogs.com/wuxianyu/category/1941486.html JS 中的类型转换：https://segmentfault.com/a/119000001367922...
PHP知识点整理（2）
qq_21736743的博客
05-21 5748
PHP的意思 PHP是一个基于服务端来创建动态网站的脚本语言，您可以用PHP和HTML生成网站主页 什么事面向对象？主要特征是什么？ 面向对象是程序的一种设计方式，它利于提高程序的重用性，使程序结构更加清晰。主要特征：封装、继承、多态。 SESSION 与 COOKIE的区别是什么，请从协议，产生的原因与作用说明? 1、http无状态协议，不能区分用户是否是从同一个网站上来的，同一个用户请求不同的页面不能看做是同一个用户。 2、SESSION存储在服务器端，COOKIE保...
基于java的校园美食交流系统设计与实现.docx
09-19
基于java的校园美食交流系统设计与实现.docx
#_ssm_126_mysql_实习支教中小学学校信息管理系统_.zip
09-19
均包含代码，文章，部分项目包含ppt
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip
最新发布
09-19
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip 个人大四的毕业设计、课程设计、作业、经导师指导并认可通过的高分设计项目，评审平均分达96.5分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 [资源说明] 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），供学习参考。
ASP.NET公交车管理系统的实现与设计(源代码+论文).zip
09-19
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下载 4使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、 4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值