js 事件机制1

秒速五厘米 2021-07-24 13:04 419阅读 0赞

方法1:在html标签中通过添加属性实现
    方法2:通过document对象来添加
    
    一个标签可以放多个事件
    一个事件可以放多个触发操作
    	 onclick="testOnclick();test()"
    	
    	**获取光标**
    		dom对象.focus()
    
    	**单双击事件**
    		单击
    			onclick="操作"
    		双击
    			ondblclick="操作"
    			
    	**鼠标事件**
    	除了onmouseenter和onmouseleave不冒泡，其他为冒泡
    		鼠标移动事件
    			onmousemove="操作"
    		鼠标悬停事件
    			onmouseover="操作"
    		鼠标移出事件
    			onmouseout="操作"
    		鼠标移进事件(不冒泡)
    			onmouseenter="操作"
    		鼠标移出事件(不冒泡)
    			onmouseleave="操作"
    		鼠标按下事件
    			onmousedown="操作"
    		鼠标抬起事件
    			onmouseup="操作"
    
    
    	**键盘事件**
    		键盘弹起事件(冒泡)
    			onkeyup="操作"  当按键弹起时触发
    		键盘下压事件(冒泡)
    			onkeydown="操作"  当按键下压时触发，按下会一直触发，不区分大小写
    		键盘下压事件(冒泡)
    			onkeypress="操作"  当按下除功能键外的按键触发，按下会一直触发，区分大小写
    
    
    	**焦点事件(即光标)**
    		获取焦点(不支持冒泡)
    			onfocus="操作"
    		失去焦点(不支持冒泡)
    			onblur="操作"  光标消失时触发
    		
    		
    	**页面加载事件**
    		onload="操作"  放在body标签里,会在页面加载成功后触发事件
    					     在js代码域中调用，会在页面还未加载时触发事件
    					     
    		onerror="操作"
    			页面加载失败时执行 
    	
    	**改变事件**
    		onchange="操作"
    		当搭配输入文本框时，改变数据只有当焦点失去时才触发，不合适
    		搭配下拉框，随着选项的改变而触发
    		
    	**状态改变事件**
    		onreadystatechange="操作"
    		当状态改变时执行
    	
    	**加载domtree完成后事件**
    		.addEventListener("DOMContentLoaded",函数)
    		加载domtree时候执行,优先于onload事件
    	
    	"样式/视口大小改变事件"
    		.onresize="操作"
    		当样式尺寸改变时执行
    	
    	**滚动条改变事件**
    		.onscroll="操作"
    		滚动条改变时执行
    	
    	**鼠标滑轮事件**
    		非火狐     .onmousewheel="操作"
    		火狐		.addEventListener("DOMMouseScroll",函数,false);
    	
    	**表单提交事件**
    		在form表单设置onsubmit();
    		当使用input标签,且type=‘submit’时,触发
    
    	**在div区域上右键单击触发事件**
    		.oncontextmenu='操作'
    		
    	**图片加载完成事件**
    		img对象.onLoad=回调
    		vue:@load

代码示例:

<html >
    	<head >
    		<title >js 事件机制1</title>
    		<meta charset="utf-8" />
    		<script type="text/javascript">
    			
    			/*单机事件*/
    			function testOnclick(){ 
    				alert("单机事件");
    			}
    			
    			function testDblclick()
    			{ 
    				alert("双击事件");
    			}
    		
    			/*鼠标事件*/
    			function testOnmouseover(){ 
    				alert("鼠标悬停事件");
    			}
    			
    			function testOnmousemove(){ 
    				alert("鼠标移动事件");
    			}
    			
    			function testOnmouseout(){ 
    				alert("鼠标移出事件")
    			}
    			function testOnmouseenter(){ 
    				alert("鼠标移进事件")
    			}
    			
    			/*键盘事件*/
    			function testOnkeyup()
    			{ 
    				alert("键盘弹起事件");
    			}
    			
    			function  testOnkeydown()
    			{ 
    				alert("键盘下压事件");
    			}
    			/*焦点事件*/
    			function testOnfocus()
    			{ 
    				alert("获取焦点");
    			}
    			
    			function testOnblur(){ 
    				alert("失去焦点");
    			}
    			/*页面加载事件*/
    			function testOnload()
    			{ 
    				alert("页面加载");
    			}
    			testOnload();
    			
    			/*测试*/
    			function test()
    			{ 
    				alert("测试");
    			}
    			/*改变事件*/
    			function t1()
    			{ 
    				alert("改变1");
    			}
    			
    		</script>
    		
    		<style type="text/css">
    			#showdiv{ 
    				width:300px;
    				height:300px;
    				border:solid 1px red;
    				
    			}
    		</style>
    	</head>
    	<body onload="testOnload()" >
    		<input type="button" value="测试单击" onclick="testOnclick();test()" />
    		<input type="button" value="测试双击" ondblclick="testDblclick()" />
    		
    		<div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()" onmouseenter="testOnmouseenter()" >
    			
    			
    		</div>
    		<input type="text" name="" id="" onkeyup="testOnkeyup()" />
    		<input	type="text" onkeydown="testOnkeydown()"/>
    		<br />
    		<input type="text" onfocus="testOnfocus()" />
    		<input type="text" onblur="testOnblur()" />
    
    		<select name="" id="" onchange="t1()">
    			<option value="">北京</option>
    			<option value="">上海</option>
    			<option value="">广州</option>
    		</select>
    	</body>
    </html>