JavaScript高级——事件监听控制




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事件监听 </title>

<script type="text/javascript">

		function run(){  	alert("你好");}
		/* 
			onfocus	元素获取焦点
			onblur	元素失去焦点
			
		 */
		 function run1()
		 {
		       alert("获取焦点");
		 }
		 function run2()
		 {	
		 	   alert("失去焦点");
		 }
		 
		 /* 
			onload   页面加载完成时执行。。。
			可以有效避免   使用元素标签时/获取元素对象时   元素未加载
		 */
		 function run3()
		 {
		     	alert(document.getElementById("HH").innerHTML);
		 }
		 /*
		 		onchange()   当值改变时调用
		 */
		 function run4()
		 {
		 	   alert("选择的值改变了");
		 }
		 /*
		     javascript 事件绑定方式
			 		1、HTML属性绑定方式
					2、HTML DOM  方法绑定
					
				
		 */
		 function run5()
		 {
		 	var arr = document.getElementsByTagName("input");
			alert(arr.length);
			alert(arr[0].value);
		 }
		 function run6(x)
		 {
		     alert(x.value);
		 }
		 
		 /* 
			如果输入数字  放行
			如果输入非数字  阻止默认事件(键盘输入键码值事件)
			
			0~9   键码值  48~57    8对应退格键
		 */
		 
		 function run7()
		 {
		       //获取事件对象
		 		var e = window.event;
				//获取键码值进行判断
				var code = e.keyCode;
				if(!(code)>=48 && code<=57)
				{
				    // 不是数字   阻止默认事件
					e.returnValue = false;
				}
		 }
		 function run8(e)
		 {
		 	//获取键码值
		 	var code;
		 	if(e&&e.preventDefault)
			{
		 		//火狐或者其他浏览器
		 		code=e.which;
		 	}
			else
			{
		 		//IE  
		 		code=window.event.keyCode;
		 	}
		 	//通过键码值进行判断   !(48~57)  非数字   并且  不是退格键  8
		 	if(!((code>=48 && code<=57)||(code==8)))
			{
		 		//阻止默认事件
		 		if(e&&e.preventDefault)
				{
		 		//火狐或者其他浏览器
		 		   e.preventDefault();
			 	}else
				{
			 		//IE  
			 		window.event.returnValue=false;
			 	}
		 		
		 	}
		 }
</script>
</head>

<body οnlοad="run3()">

	<input type="button" value="我是按钮 " οnclick="run()" />
	<input type="text" οnfοcus="run1()" οnblur="run2()" />
	<span id="HH">body启动</span>
	<select οnchange="run4()">
		<option value="bj">北京</option>
		<option value="sh">上海</option>
		<option value="sz">深圳</option>
	
	</select>
	<p></p>
	<input type="button" value="按钮1" οnclick="run5()" />
	<input type="button" value="按钮2" οnclick="run6(this)" />
	
	<!-- ------------------------------------------------- -->
	<input type="text" id="i1" οnkeydοwn="run7()" /><br/>
	<input type="text" id="i2" οnkeydοwn="run8(event)" /><br/>
	
</body>
</html>
 


早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页