javascript事件key，mouse中的区别（个人理解+参考w3school）

最新推荐文章于 2024-07-10 21:04:32 发布

tu451953337

最新推荐文章于 2024-07-10 21:04:32 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript keydown keypress keyup mousedown

本文链接：https://blog.youkuaiyun.com/tu451953337/article/details/37903589

Web前端专栏收录该内容

4 篇文章

订阅专栏

key的区别

1. keypress, 只要按下有ASCII值的键才触发。如按下ctrl键不会触发事件，但按下字母键或数字键都可以触发。也可以浅显的理解为能直接在文本框里打出东西的键才能触发该事件。

值得注意的是打中文不会触发该事件。通过event.keyCode，按下a和A得到就是对应的ASCII值。

2. keydown, 和keypress相似但不同，相似的按下键盘触发事件，不同的是只要按下键盘的某一个键都会返回该键的keyCode。

3. keyup, 松开键盘的任意一个按键时触发，得到的keyCode和keydown事件一样

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("input").keypress(function(event){
					$("#s1").text(event.keyCode);
				  });
				$("input").keydown(function(event){
					$("#s2").text(event.keyCode);
				  });
				$("input").keyup(function(event){
					$("#s3").text(event.keyCode);
				  });
			});
		</script>
	</head>
	<body>
		Enter your name: <input type="text" />
		<p>KeyPress:<span id="s1">0</span></p>
		<p>KeyDown:<span id="s2">0</span></p>
		<p>KeyUp:<span id="s3">0</span></p>
	</body>
</html>

mouse的区别

1.mousedown，点击鼠标后触发事件。点击鼠标左键、右键、滚轮都可以触发。只要按下，不用松开就会触发。
2.mouseup, 点击鼠标松开后触发事件。点击鼠标左键、右键、滚轮都可以触发。按下不会触发，松开才会触发。

3.mouseover，当鼠标移入元素或其子元素就会触发事件。移到子元素会再次触发
4.mouseenter，和mouseover相似，但只有当鼠标移入元素就会触发。移到子元素不会再次触发。

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			x=0;
			y=0;
			$(document).ready(function(){
				$(".over").mouseover(function(){
					$(".over span").text(x+=1);
				});
				$(".enter").mouseenter(function(){
					$(".enter span").text(y+=1);
				});
			});
		</script>
	</head>
	<body>
		<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
		<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
		<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
			<h2 style="background-color:white;">被触发的 Mouseover 事件：<span style="border:1px red solid"></span></h2>
		</div>
		<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
			<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
		</div>
	</body>
</html>

5.mouseout，当鼠标离开元素或其子元素时触发事件。离开子元素会再次触发事件。
6.mouseleave, 当鼠标离开元素时触发事件。离开子元素不会再次触发事件。

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			x=0;
			y=0;
			$(document).ready(function(){
				$("div.out").mouseout(function(){
					$(".out span").text(x+=1);
				});
				$("div.leave").mouseleave(function(){
					$(".leave span").text(y+=1);
				});
			});
	</script>
	</head>
	<body>
		<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
		<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
		<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
			<h2 style="background-color:white;">被触发的 Mouseout 事件：<span style="border: 1px red solid"></span></h2>
		</div>
		<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
			<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
		</div>
	</body>
</html>

7.mousemove，当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		  $(document).mousemove(function(e){
			$("span").text(e.pageX + ", " + e.pageY);
		  });
		});
		</script>
	</head>
	<body>
		<p>鼠标位于坐标： <span></span>.</p>
	</body>
</html>