JavaScript知识第七讲之事件处理

其他 2020-05-27 11:35:53 阅读次数: 0

事件处理

一、事件与事件处理概述

（1）、什么是事件？

事件是一些可以通过脚本响应的页面动作。

（2）、JavaScript中的常用事件

在这里插入图片描述

（3）、事件调用

1）在HTML中调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input  name="save" type="button" value="保存" onclick="show()" />
		<script type="text/javascript">
			function show(){
				alert("新白真是一个宝藏男孩");
			}
		</script>
	</body>
</html>

在这里插入图片描述

2）在JavaScript中的调用

在JavaScript中指定事件处理程序时，事件名称必须小写，才能正确响应事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form id="form" name="form"  method="post" action="">
		<input id="save" name="save" type="button" value="保存" />
		</form>
		<script type="text/javascript">
			form.save.onclick=function(){
				alert("新白真是一个宝藏男孩");
			}
		</script>
	</body>
</html>

（4）、事件对象

在IE浏览器中事件对象是window对象的一个属性event，在IE中，事件的对象包含在event的srcElement属性中，而在标准的MOC浏览器中，对象包含在target属性中。

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		 document.onclick=function handle(oEvent){
				if(window.event||event)
				oEvent=window.event;
				var oTarget;
				if(oEvent.srcElement)
				oTarget=oEvent.srcElement;
				else
				oTarget=oEvent.target;
				alert(oTarget.tagName);
			}
		</script>
	</body>
</html>

在这里插入图片描述

二、表单相关事件

（1）、获得焦点与失去焦点事件

获得焦点 -----onfocus
失去焦点事件-------onblur

实例：在用户选择页面中的文本框时，改变文本框的背景颜色，当选择其它的文本框时，将失去焦点的文本框恢复到原来的颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<table align="center">
			<tr>
				<td>用户名：</td>
				<td><input type="text" id="name" onfocus="show()"  onblur="disappear()"/></td>
			</tr>
		
			<tr>
				<td>密码：</td>
				<td><input type="text" id="password"  onfocus="show()"  onblur="disappear()"/></td>
			</tr>
			<tr>
				<td>真实姓名：</td>
				<td><input type="text" id="realname" onfocus="show()"  onblur="disappear()" /></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td><input type="text" id="sex"  onfocus="show()"  onblur="disappear()"/></td>
			</tr>
			<tr>
				<td>邮箱：</td>
				<td><input type="text" id="postbox"  onfocus="show()"  onblur="disappear()"/></td>
			</tr>
		</table>
	</head>
	<body>	
		<script type="text/javascript">
			function show(event){//当前元素获得焦点
				 var e=window.event;
				 var obj=e.srcElement; //用于获取当前对象的名称
				 obj.style.background="#FFFF66";
			}
			function disappear(event){//当前元素获得焦点
				 var e=window.event;
				 var obj=e.srcElement; //用于获取当前对象的名称
				 obj.style.background="#FFFFFF";
			}
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

（2）、失去焦点内容改变事件

内容改变事件--------onchange

实例：在用户选择下拉菜单中的颜色时，通过onchange事件来相应的改变文本框的字体颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text"  id="font" size="23" value="JavaScript自学视频教程"/>
		<select name="color" onchange="change()">
			<option value="black">黑</option>
			<option value="yellow">黄</option>
			<option value="blue">蓝</option>
			<option value="green">绿</option>
			<option value="red">红</option>
			<option value="purple">紫</option>
		</select>
		<script type="text/javascript">
			function change(){
				var e=window.event;
				var obj=e.srcElement;
				//selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)
				font.style.color=obj.options[obj.selectedIndex].value;
			//obj.options[obj.selecedIndex]是指定的某个<option>标签,value属性------返回/指定 值，与<options value="...">一致
			}
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

（3）、表单提交与重置事件

  • 表单提交事件：在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit），在表单提交之前被触发，因此，该键的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性
  • 表单重置事件：与表单提交事件的处理过程相同，只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框

语法格式如下：

  • formname：表单名称
  • Funname：函数名或执行语句，如果是函数名，在该函数中必须有布尔型的返回值

在这里插入图片描述备注：如果在onsubmit和onreset事件中调用的是自定义函数名，那么必须在函数名的前面加return语句，否则，不论在函数中返回的是true还是false，当前时间所返回的值一律是true

实例：

<!DOCTYPE html>
<html>
	<head>
		<!--在提交表单时，通过onsubmit事件来判断提交的表单中是否有空文本框，
		如果有，则不允许提交，并通过表单的onreset事件将表单中的文本框清空，以便重新输入信息-->
		<meta charset="utf-8">
		<title>表单提交的验证</title>

	</head>
	<body style="font-size:12px" background="../image/timg.jpg">
		<table width="487" height="333" border="0" align="center" cellpadding="0" cellspacing="0">
			<tr>
				<td align="center" valign="top"><br>
					<br>
					<br>
					<br> <br>
					<table width="86%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#6699CC">
						<form name="form1" onreset="return AllReset()" onsubmit="return AllSubmit()"> ;
							<!--为表单绑定提交与重置事件函数-->
							<tr bgcolor="#FFFFFF">
								<td height="22" align="right">所属类别:</td>
								<td height="22" align="left">
									<select name="txt1" id="txt1">
										<option value="数码设备">数码设备</option>
										<option value="家用电器">家用电器</option>
										<option value="礼品工艺">日常用品</option>
									</select>
									<select name="txt2" id="txt2">
										<option value="数码相机">数码相机</option>
										<option value="打印机">打印机</option>
									</select></td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td height="22" align="right">商品名称:</td>
								<td height="22" align="left"><input name="txt3" type="text" id="txt3" size="30" maxlength="50"></td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td height="22" align="right">市场价格:</td>
								<td height="22" align="left"><input name="txt4" type="text" id="txt4" size="10"></td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td height="22" align="right">会员价格:</td>
								<td height="22" align="left"><input name="txt5" type="text" id="txt5" size="10" maxlength="50"></td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td height="22" align="right">商品简介:</td>
								<td height="22" align="left"><textarea name="txt6" cols="35" rows="4" id="txt6"></textarea></td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td height="22" align="right">商品数量:</td>
								<td height="22" align="left"><input name="txt7" type="text" id="txt7" size="10"></td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td height="22" colspan="2" align="center">
									<input name="sub" type="submit" id="sub2" value="提交">
									&nbsp;
									<input type="reset" name="Submit2" value="重 置"> </td>
							</tr>
						</form>
					</table>
				</td>
			</tr>
		</table>
		<script type="text/javascript">
			function AllReset() { //重置时间处理函数
				if (window.confirm("是否进行重置？"))
					return true;
				else
					return false;
			}

			function AllSubmit() { //提交事件处理函数
				var T = true;
				var e = window.event;
				var obj = e.srcElement;
				for (var i = 1; i <= 7; i++) {
					if (eval("obj."+"txt"+i).value == "") {
						T = false;
						break;
					}
				}
				if (!T) {
				alert("提交信息不允许为空");
				}
				return T;
			}
		</script>
	</body>
</html>

背景图片：
在这里插入图片描述

结果图片：
在这里插入图片描述

三、鼠标键盘事件

（1）、鼠标单击事件

在这里插入图片描述

在使用对象的单击事件时，如果在对象上按下鼠标键，然后移动鼠标到对象外再松开鼠标，单击事件无效，单击事件必须在对象上松开鼠标后，才会执行单击事件的处理程序

实例： 通过单击“变换背景”按钮，动态的改变页面的背景颜色，当用户再次单击按钮时，页面背景将以不同的颜色进行显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script language="javascript">
					var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green"
					,"purple","gray","yellow","aqua","white","silver");
		            var n=0;
		                function turncolors(){
		                      if (n==(Arraycolor.length-1)) n=0;  //
		                             n++;
		                      document.bgColor = Arraycolor[n];
		                             }
		</script>
		<form name="form1" method="post" action="">
			<p>
				<input type="button" name="Submit" value="变换背景" onclick="turncolors()">
			</p>
			<p>用按钮变换背景颜色</p>
		</form>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

（2）、鼠标按下和松开事件

在这里插入图片描述
实例：用onmousedown和onmouseup事件将文本制作成类似于< a >（超链接）标记的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜色，并弹出一个空白页

<html>
<head>
<title>用事件制作超链接文本</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<form name="form1" method="post" action="">
  <p id="p1" style="color:#AA9900 " οnmοusedοwn="mousedown()" οnmοuseup="mouseup()"><u>JavaScript自学视频教程</u></p>
</form>
 
<script language="javascript">
<!--
function mousedown(){
	var obj=document.getElementById('p1');
	obj.style.color='#0022AA';
}
function mouseup(){
	var obj=document.getElementById('p1');
	obj.style.color='#AA9900';
	window.open("","明日图书网","");
}
//-->
</script>
</body>
</html>

在这里插入图片描述

（3）、鼠标移入移出事件

在这里插入图片描述
实例：鼠标在图片上移入或移出时，动态改变图片的焦点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 鼠标移动时改变图片焦点</title>
</head>
 
<body> 
<script language="javascript">
<!--
function visible(cursor,i){ 
	if (i==0) 
		cursor.filters.alpha.opacity=100; 
	else 
		cursor.filters.alpha.opacity=50;
}
//--> 
</script>
<table border="0" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td align="center" bgcolor="#CCCCCC">
	  <img src="Temp.jpg" border="0" style="filter:alpha(opacity=100)" onMouseOver="visible(this,1)" onMouseOut="visible(this,0)" width="148" height="121">
	</td> 
  </tr> 
</table> 
</body>
</html>

在这里插入图片描述

（4）、鼠标移动事件

在这里插入图片描述
实例：鼠标在页面中移动时，在页面的状态栏中显示当前鼠标在页面上的位置，也就是（x,y）

<html>
<head>
<title>在状态栏中显示鼠标的在页面中的当前位置</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script language="javascript">
<!--
var x=0,y=0;
function MousePlace(){
	x=window.event.x;
	y=window.event.y;
	window.status="鼠标在页面中的当前位置的横坐标X: "+x+"  "+"纵坐标Y: "+y;
}
document.οnmοusemοve=MousePlace;
//-->
</script>
</body>
</html>

在这里插入图片描述

（5）、键盘事件

在这里插入图片描述
实例：利用键盘中的a键，对页面进行刷新，而无需用鼠标在IE浏览器中单击“刷新”按钮。

<html>
<head>
<title>按A键对页面进行刷新</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script language="javascript">
<!--
function Refurbish(){
	if (window.event.keyCode==65){
		location.reload();
	}
}
document.οnkeydοwn=Refurbish;
//-->
</script>
<center>
<img src="1.jpg" width="805" height="554">
</center>
</body>
</html>

在这里插入图片描述

四、页面时间

（1）、加载与卸载事件

在这里插入图片描述
实例：在网页加载时，将图片缩小成指定的大小，当鼠标移动到图片上时，将图片大小恢复成原始大小，这样可以避免使用大小不同的两个图片进行切换，并在重载网页时，用提示框显示欢迎信息

<html>
<head>
<title>网页加载时缩小图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
 
<body οnunlοad="pclose()"><!--调用窗体的卸载事件-->
<img src="image1.jpg" name="img1" οnlοad="blowup()" οnmοuseοut="blowup()" οnmοuseοver="reduce()"><!--在图片标记中调用相关事件-->
<script language="javascript">
<!--
var h=img1.height;
var w=img1.width;
function blowup(){//缩小图片
	if (img1.height>=h){
		img1.height=h-100;
		img1.width=w-100;
	}
}
function reduce(){//恢复图片的原始大小
	if (img1.height<h){
		img1.height=h;
		img1.width=w;
	}
}
function pclose(){//卸载网页时弹出提示框
	alert("欢迎浏览本网页");
}
//-->
</script>
</body>
</html>

在这里插入图片描述

（2）、页面大小事件

在这里插入图片描述
实例：在用户打开网页时，将浏览器以固定的大小显示在屏幕上，当用鼠标拽动浏览器边框改变其大小时，浏览器将恢复原始大小

<html>
<head>
<title>固定浏览器的大小</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
 
<body>
<center><img src="1.jpg" width="544" height="327"></center>
<script language="JavaScript">
function fastness(){
	window.resizeTo(650,500);
}
document.body.οnresize=fastness;
document.body.οnlοad=fastness;
</script>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44830627/article/details/105760038
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022