JavaScript之鼠标案例

最新推荐文章于 2022-10-17 10:30:00 发布

胡斐

最新推荐文章于 2022-10-17 10:30:00 发布

阅读量188

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_48200912/article/details/108621852

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JavaScript之鼠标案例

（1）Onmousewheel:鼠标滚轮案例
（2）控制键的键码值案例
（3）图片的移动
（4）事件注册

（1）Onmousewheel:鼠标滚轮案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmousewheel="wheel(event)"></div>
	</body>
	<script type="text/javascript">
		var width =100;
		var height = 100;
		
		function wheel(e){
			if(e.wheelData > 0){
				width +=5;
				height +=5;
			} else{
				width -=5;
				height -=5;
			}
			var div1 = document.getElementById("div1");
			div1.style.width = width + "px";
			div1.style.height = height + "px";
		}
	</script>
</html>

运行效果：
在这里插入图片描述通过鼠标滚轮来让图片变小

（2）控制键的键码值案例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取键盘编码值</title>
	</head>
	<body>
		<input type="text" id="what" onkeydown="keydown(event)"/>
	</body>
	<script type="text/javascript">
		function keydown(e){
			alert (e.keyCode)
			}
	</script>
</html>

在这里插入图片描述
注意：键码为13的enter，是字母键盘上的回车键
键码为108的enter，是右方数字小键盘上的回车键（笔记本一般没有）

（3）图片的移动

KeyCode属性，记录了按下键的编码
Keypress事件只捕获课可打印字符的按键，不能捕获例如shift，ctrl，alt之类
但是可以通过shiftkey，ctrlkey等属性判断在击键的同时是否按下shift
Ctrl等辅助键
1.keydown，keyup。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#img1{
				position: absolute;
				top: 0px;
				left: 0px;
			}
		</style>
	</head>
	<body onkeydown="move(event)">
		<img id="img1" src="img/a.jpg" alt="图片加载失败">
	</body>
	<script type="text/javascript">
		var top1 = 0;
		var left = 0;
		
		function move(e){
			switch(e.keyCode){
				case 37:
				         left-=5;
						 break;
			    case 38:
						top1-=5;
						 break;
				case 39:
						left +=5;
						 break;
				case 40:
				
						top1 +=5;
						 break;
		}
		var img1 =document.getElementById("img1");
		img1.style.top = top1 +"px";
		img1.style.left = left +"px";
		}
	</script>
</html>

注意：（1）使用变量top导致上下移动失败，原因是和Windows.Top这个全局变量冲突了换个变量名就好了
（2）如果top1和left移入函数中，发现只能移动5像素，原因是函数内部的局部变量在每次调用函数的时候都会重新创建并初始化，也就是说每一次调用left和top1的值都是零
不会保留上一次值，如果需要保留，就只能用全局变量。

（4）事件注册

三种方法：
（1）使用onxxx属性，例如οnclick=“fun”
（2）通过js设置属性元素的onxxx属性
（3）通过addEventlisten注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 第一种注册方式 -->
		<input type="text" id="txt1" onfocus="focus1()" />
	</body>
	<script type="text/javascript">
		var txt1 = document.getElementById("txt1")
		// 注册事件的第二种方法
		txt1.onblur = blur2;
		// 注册事件的第三种方法
		
		txt1.addEventListener("change",function(){
			alert("值改变了")
		});
		function focus1(){
			txt1.style.backgroundColor="blue";
			}
			function blur2(){
			var txt1 = document.getElementById("txt1");
				txt1.style.backgroundColor="yellow";
			
			}
	</script>
</html>

运行效果：
在这里插入图片描述没有单击的效果：

后面两种方法有什么好处：
将页面的内容，行式、行为分离、内容和样式可能是美工人员去完成
行为（也就是js内容）往往是程序员的事。有利于分工合作
第三种方式addeventlistener（添加事件监听）它的第一个事件名，第二个参数是事件处理函数。既然可以添加事件监听，那么必然会有移除事件监听，用的是removEventListener参数与addEvener是一样的
而且通过addEventlistenr和removeListener我们可以动态的注册不同的事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">捕获与冒泡的演示</p>
		</div>
	</body>
	<script type="text/javascript">
		var div1 = document.getElementById("div1");
		var p1=document.getElementById("p1");
		p1.addEventListener("click",click1);
		div1.addEventListener("click",click2);
		
		function click1(){
			alert("段落被单击了");
		}
		
		function click2(){
			
			alert("div被单击了");
		}
		
	</script>
</html>

运行效果：
在这里插入图片描述

在这个案例中，如果单击文字，先提示“段落被单击了”,然后提示“div被单击了”，因为div是p的父容器

胡斐

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之鼠标案例

JavaScript之鼠标案例（1）Onmousewheel:鼠标滚轮案例（2）控制键的键码值案例（3）图片的移动（4）事件注册（1）Onmousewheel:鼠标滚轮案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ width: 100px
复制链接

扫一扫

专栏目录