js事件应用--基础（事件对象、鼠标事件、键盘事件）

最新推荐文章于 2022-11-10 20:47:38 发布

柏油

最新推荐文章于 2022-11-10 20:47:38 发布

阅读量540

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75137294

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

案例1：event事件对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onclick = function(){
				document.onclick =function(ev){
				//IE 、Chrome
				//alert(event.clientX+','+event.clientY);	
				
				//FF
				//alert(ev.clientX+','+ev.clientY);
				
				//解决兼容问题
				var oEvent = ev || event;
				alert(oEvent.clientX+','+oEvent.clientY);
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

案例2：事件冒泡，一层一层往上传递

<!DOCTYPE html>
<html οnclick="alert('html')">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {padding: 100px;}
			#div1{background: gray;}
			#div1 #div2 {background: green;}
			#div1 #div2 #div3{background: black;}
		</style>
	</head>
	<body οnclick="alert('body')">
		<div id = "div1" οnclick="alert('div1')">
			<div id = "div2" οnclick="alert('div2')">
				<div id = "div3" οnclick="alert('div3')">	
				</div>
			</div>
		</div>
	</body>
</html>

案例3：仿select下拉框（点击按钮显示下拉框、点击其他空白地区，下拉框隐藏）

oEven.cancelBubble = true;的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px;width: 200px; background: red;display: none;}
		</style>
		<script>
			window.onclick = function(){
				var oDiv = document.getElementById("div1");
				var oBtn = document.getElementById("btn");
				
				
				oBtn.onclick = function(ev){
					var oEven = ev || event;
					oDiv.style.display = 'block';
					oEven.cancelBubble = true;
				};
				
				document.onclick =function(){
					oDiv.style.display = 'none';
				};
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" id = "btn"/>
		<div id = "div1"></div>
	</body>
</html>

案例4：鼠标移动

-跟随鼠标移动的div

-------清除滚动条的影响

------------------滚动条的意义（可视区与页面顶部的距离）

注意：clientX计算的是可视区的x坐标！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{height: 200px;width: 200px;background: red;position: absolute;}
		</style>
		<script>
			window.onmousemove = function(ev){
				var oDiv = document.getElementById("div1");
				var oEvent = ev || event;
				var scollTop = document.documentElement.scrollTop || document.body.scrollTop;
				
				oDiv.style.left = oEvent.clientX + 'px';
				oDiv.style.top = oEvent.clientY + scollTop + 'px';
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<div id = "div1"></div>
	</body>
</html>

案例5：一串跟随的div:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{height: 20px;width: 20px;background: red;position: absolute;}
		</style>
		<script>
			function pos (ev){
				var scollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var scollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				return {x:scollLeft + ev.clientX,y:scollTop + ev.clientY};
			}
			
			window.onmousemove = function(ev){
				var aDiv = document.getElementsByTagName('div');
				
				for(var i = aDiv.length - 1; i > 0; i--){
					aDiv[i].style.left = aDiv[i-1].offsetLeft + 'px';
					aDiv[i].style.top = aDiv[i-1].offsetTop + 'px';
				}
				
				var oEvent = ev || event ;
				var posit = pos(oEvent);

				aDiv[0].style.left = posit.x + 'px';
				aDiv[0].style.top = posit.y + 'px';
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

案例6：键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{height: 100px;width: 100px;background: red;position: absolute;}
		</style>
		<script>
			document.onkeydown = function(ev){
				var oEvent = ev || event;
				var oDiv = document.getElementById("div1");
				
				if(oEvent.keyCode == 37){ //左
					oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
				}
				if(oEvent.keyCode == 38){ //上
					oDiv.style.top = oDiv.offsetTop - 10 + 'px';
				}
				if(oEvent.keyCode == 39){ //右
					oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
				}
				if(oEvent.keyCode == 40){
					oDiv.style.top = oDiv.offsetTop + 10 + 'px';
				}
			}
		</script>
	</head>
	<body>
		<div id = 'div1'></div>
	</body>
</html>

案例7：回车提交/回车+ctrl提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onclick = function(){
				var oTxt1 = document.getElementById("txt1");
				var oBtn = document.getElementById("btn");
				var oTxt2 = document.getElementById("txt2");
				
				oBtn.onclick = function(){ //按键响应
				  oTxt2.value += oTxt1.value + '\n';
				  oTxt1.value = '';
				}
				
//				document.onkeydown = function(ev){ //回车响应
//					var oEvent = ev || event;
//					if(oEvent.keyCode == 13){
//				  oTxt2.value += oTxt1.value + '\n';
//				  oTxt1.value = '';						
//					}
//				}
				
				document.onkeydown = function(ev){  //ctrl+回车响应
					var oEvent = ev || event;
					if(oEvent.keyCode == 13 && oEvent.ctrlKey){
				    oTxt2.value += oTxt1.value + '\n';
				    oTxt1.value = '';	
				}
			}
		}
		</script>
	</head>
	<body>
		<input type="text" id = "txt1"/>
		<input type="button" id = "btn" value="发布"/><br /><br />
		<textarea id = "txt2" rows="10" cols="20"></textarea>
	</body>
</html>

柏油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js事件应用--基础（事件对象、鼠标事件、键盘事件）

案例1：event事件对象： window.onclick = function(){ document.onclick =function(ev){ //IE 、Chrome //alert(event.clientX+','+event.clientY); //FF //alert(ev.clientX+',
复制链接

扫一扫