on事件之四

最新推荐文章于 2024-04-18 23:45:00 发布

雷碎

最新推荐文章于 2024-04-18 23:45:00 发布

阅读量96

点赞数

分类专栏：新人路途文章标签： on事件之四

本文链接：https://blog.csdn.net/weixin_44540155/article/details/89081887

版权

新人路途专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文献种类：专题技术文献；
                               on事件之四
开发工具与关键技术：VS JavaScript
作者：吴泽锋
撰写时间：2019年4月8日


9、onmouseover 和 onmouseout 事件
	onmouseover事件可用于在用户的鼠标移至 HTML 元素上方元素时触发函数。
	onmouseout 事件可用于在用户的鼠标在 HTML 元素上方移出元素时触发函数。
	例9.1：当指针移至元素上方时，改变其颜色；当指针移出后，会再次改变其颜色。 
	和css3的伪类效果差不多。
	里面的内容会发生改变，从开始的黑色到鼠标移入变成红色最后鼠标移出变成天蓝色。
	<body>
		<h1 onmouseover = "style.color = 'red'" "style.color='skyblue'">
				鼠标移到这</h1>
	</body>

	例9.2：移入前: 移入后：  该效果用VS可能会出现错误，建议使用DW 开发工具。
	<body>
		<a href="要跳转的网址或页面" "lighton()" "lightoff()">
	  	   	  <img alt="Visit!" src="eg_buloff.PNG" id="myimage" />
		</a>
		<script> 
				function lighton() 
				{  document.getElementById("myimage").src = "eg_bulon.PNG";  } 
				
				function lightoff() 
				{  document.getElementById("myimage").src = "eg_buloff.PNG";  }
		</script>
	</body>

10、onkeyup 事件：
	onkeyup 事件会在键盘按键被松开时发生。
	例10.1：在输入域中键入英文字符并松开键时，字符会被更改为大写（逐一地）：
	但是有缺点：
	1、如果一直按着不放的话是不会更改的，
	   而且如果先按着一个字母不放松，紧接着继续按下一个字母，继续按下一个字母…，
		只要不松手的话都是小写，无论哪个被按住的字母被松开，之前的所有都会瞬间更改。
	2、如果用除了电脑自带的微软输入法时：
		在中文状态下输入连续的拼音然后按 shift键的话，以小写形式出现；
		如果再按一次 shift键的话就会更改为大写形式，
		或者再继续按一个空格的话也会更改为大写；
		或者在输入拼音后按回车键，一次时就会是英文小写，两次就是英文大写；
	3、如果使用系统自带的微软输入法时：
		中文状态下：如果输入拼音的话每输入一个就重复一次，并且每删除一个拼音也会重复。
		如：简单例子abc：AA'BA'B'CA'BA；
			输入完abc时按 空格键：AA'BA'B'C按不出；
			输入完abc时按 回车键：AA'BA'B'CABC；
			输入完abc时按 shift键：AA'BA'B'Cabc；
	4、用以上2和3输出小写英文时如果把文本框里的小写英文选中就会更改其状态为大写形式;
	   选中文本必须用鼠标进行选中，哪怕是一个小写英文，或者选中后又把鼠标往后走取消选中，一样可以更改大写。
	   
	<body>
		请输入你的姓名：<input type = "text" id="fname" onkeyup = "upperCase(this.id)" />
		<script type="text/javascript">  
			function upperCase(x) 
			{   var y = document.getElementById(x).value;
			    document.getElementById(x).value = y.toUpperCase();  
			}
		</script>
	</body>
	
	例10.2：获取键盘按键的unicode
	在键盘上按一个键，消息框会提示出该按键的 unicode。
	此处的””方法须放于 <body ""> 处
	<body onkeyup = "whichButton(event)">  
		<script type = "text/javascript"> 
			function whichButton(event) {  alert(event.keyCode)  }  
		</script>  
	</body>
11、onkeypress 事件：会在键盘按键被按下并释放一个键时发生。
	浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，
	而 Netscape/Firefox/Opera 使用 event.which。
	
	例11：用户无法在输入框中键入数字：
	缺点：如果用户在使用输入法输入拼音或者笔画时在其中加入数字并输出的话是无法阻止的。
	如果使用系统自带的微软拼音输入模式时：
	中文状态下：直接输入数字不会阻止，开启大写后输入数字会进行阻止；
	英文状态下：无论大小写都会阻止；
	<body>
		<input type = "text" onkeypress = "return noNumbers(event)" />
		<script type = "text/javascript">  
			function noNumbers(e)
			{   var keynum;  var keychar;  var numcheck;  
			    if (window.event) // IE
				   {   keynum = e.keyCode;  }  
				else if (e.which) // Netscape/Firefox/Opera
				   {  keynum = e.which;  }
				keychar = String.fromCharCode(keynum);
				numcheck = /\d/;  return !numcheck.test(keychar);   
		     }
		</script>
	</body>
	借鉴于老师上课文档与W3Cchool

雷碎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
on事件之四

文献种类：专题技术文献； on事件之四开发工具与关键技术：VS JavaScript作者：吴泽锋撰写时间：2019年4月8日9、onmouseover 和 onmouseout 事件 onmouseover事件可用于在用户的鼠标移至 HTML 元素上方元素时触发函数。 onmouseout 事件可用于在用户的鼠标在 H...
复制链接

扫一扫