JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】

最新推荐文章于 2024-02-01 09:19:56 发布
最新推荐文章于 2024-02-01 09:19:56 发布
阅读量1.2k 收藏 3
点赞数 3
分类专栏： JavaScript 文章标签： 事件委派 事件绑定 事件传播 滚轮事件 键盘事件
希望对您有所帮助；知识共享，欢迎转载，转载时：请附上原文链接！
本文链接：https://blog.csdn.net/weixin_44949135/article/details/112981522
版权

学习地址：

  1. 谷粒学院——尚硅谷
  2. 哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)

JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】

目   录

P114 114.尚硅谷_JS基础_事件的委派 19:49

IE 属性 / 标准 Event 属性

事件的委派——案例

P115 115.尚硅谷_JS基础_事件的绑定 18:06

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

addEventListener()：为元素绑定响应函数

attachEvent()：绑定事件【IE8】

定义一个函数，用来为指定元素绑定响应函数

P116 116.尚硅谷_JS基础_完成bind函数 08:58

P117 117.尚硅谷_JS基础_事件的传播 14:46

P118 118.尚硅谷_JS基础_拖拽（一） 19:15

P119 119.尚硅谷_JS基础_拖拽（二） 09:42

P120 120.尚硅谷_JS基础_拖拽（三） 24:27

测试IE8

拖拽2 代码

拖拽3 代码——拖拽图片

P121 121.尚硅谷_JS基础_滚轮的事件 22:27

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

event.wheelDelta：获取鼠标滚轮滚动的方向

在火狐中使用event.detail来获取滚动的方向

处理“滚动条”

滚轮事件-代码

P122 122.尚硅谷_JS基础_键盘事件 24:02

事件句柄（Event Handlers）

鼠标 / 键盘 属性

IE 属性

通过keyCode来获取按键的编码

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

使文本框中不能输入数字

P123 123.尚硅谷_JS基础_键盘移动div 08:59

使div可以根据不同的方向键向不同的方向移动

P114 114.尚硅谷_JS基础_事件的委派 19:49

IE 属性 / 标准 Event 属性

事件的委派——案例

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素

事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function() {

				var u1 = document.getElementById("u1");
				//点击按钮以后添加超链接
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function() {
					var li = document.createElement("li"); // 创建一个li
					li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
					u1.appendChild(li); // 将li添加到ul中
				};

				/*
				 * 为每一个超链接都绑定一个单击响应函数
				 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
				 * 	而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
				 */
				var allA = document.getElementsByTagName("a"); // 获取所有的a
				/* for (var i = 0; i < allA.length; i++) { // 遍历
					allA[i].onclick = function() {
						alert("我是a的单击响应函数！！！");
					};
				} */

				/*
				 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
				 * 我们可以尝试将其绑定给元素的共同的祖先元素
				 * 
				 * 事件的委派
				 * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
				 * 		从而通过祖先元素的响应函数来处理事件。
				 *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
				 */
				u1.onclick = function(event) { // 为ul绑定一个单击响应函数
					event = event || window.event;
					/*
					 * target
					 * 	- event中的target表示的触发事件的对象
					 */
					// alert(event.target);
					//如果触发事件的对象是我们期望的元素，则执行否则不执行
					if (event.target.className == "link") {
						alert("我是ul的单击响应函数");
					}
				};

			};
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="u1" style="background-color: #bfa;">
			<li>
				<p>我是p元素</p>
			</li>
			<li><a href="javascript:;" class="link">超链接一</a></li>
			<li><a href="javascript:;" class="link">超链接二</a></li>
			<li><a href="javascript:;" class="link">超链接三</a></li>
		</ul>
	</body>
</html>

P115 115.尚硅谷_JS基础_事件的绑定 18:06

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

addEventListener()：为元素绑定响应函数

addEventListener()：通过这个方法也可以为元素绑定响应函数。
参数：

  1. 事件的字符串，click不要on。
  2. 回调函数，当事件触发时 该函数会被调用。
  3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false。

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，这个方法不支持IE8及以下的浏览器。

attachEvent()：绑定事件【IE8】

attachEvent()：在IE8中可以使用attachEvent()来绑定事件
参数：

  1. 事件的字符串，onclick要on。
  2. 回调函数。

这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

  

定义一个函数，用来为指定元素绑定响应函数

addEventListener()中的this，是绑定事件的对象；attachEvent()中的this，是window。需要统一两个方法this。

P116 116.尚硅谷_JS基础_完成bind函数 08:58

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				// 点击按钮以后弹出一个内容
				var btn01 = document.getElementById("btn01"); // 获取按钮对象

				/*
				 * 使用 对象.事件 = 函数 的形式绑定响应函数，
				 * 	它只能同时为一个元素的一个事件绑定一个响应函数，
				 * 	不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
				 */
				/* btn01.onclick = function() { // 为btn01绑定第1个单击响应函数
					alert(1);
				};
				btn01.onclick = function() { // 为btn01绑定第2个响应函数
					alert(2);
				}; */

				/*
				 * addEventListener()
				 * 	- 通过这个方法也可以为元素绑定响应函数
				 *  - 参数：
				 * 		1.事件的字符串，click不要on
				 * 		2.回调函数，当事件触发时 该函数会被调用
				 * 		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
				 * 
				 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
				 * 	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
				 * 
				 * 这个方法不支持IE8及以下的浏览器
				 */
				/* btn01.addEventListener("click", function() {
					alert(1);
				}, false);
				btn01.addEventListener("click", function() {
					alert(2);
				}, false);
				btn01.addEventListener("click", function() {
					alert(3);
				}, false); */

				/*
				 * attachEvent()
				 * 	- 在IE8中可以使用attachEvent()来绑定事件
				 *  - 参数：
				 * 		1.事件的字符串，要on
				 * 		2.回调函数
				 * 
				 *  - 这个方法也可以同时为一个事件绑定多个处理函数，
				 * 		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
				 */
				/* btn01.attachEvent("onclick", function() {
					alert(1);
				});
				btn01.attachEvent("onclick", function() {
					alert(2);
				});
				btn01.attachEvent("onclick", function() {
					alert(3);
				}); */

				/* btn01.addEventListener("click", function() {
					alert(this);
				}, false);
				btn01.attachEvent("onclick", function() {
					alert(this);
				}); */

				bind(btn01, "click", function() {
					alert(this);
				});
			};

			//定义一个函数，用来为指定元素绑定响应函数
			/*
			 * addEventListener()中的this，是绑定事件的对象
			 * attachEvent()中的this，是window
			 *  需要统一两个方法this
			 */
			/*
			 * 参数：
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串(不要on)
			 *  callback 回调函数
			 */
			function bind(obj, eventStr, callback) {
				if (obj.addEventListener) {
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr, callback, false);
				} else {
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on" + eventStr, function() {
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
	</body>
</html>

P117 117.尚硅谷_JS基础_事件的传播 14:46

事件的传播

  • 关于事件的传播网景公司和微软公司有不同的理解
  • 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
  • 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。
  • W3C综合了两个公司的方案，将事件传播分成了三个阶段：
  1. 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
  2. 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
  3. 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
  • 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false，IE8及以下的浏览器中没有捕获阶段。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
			}
			#box2 {
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			#box3 {
				width: 150px;
				height: 150px;
				background-color: skyblue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// 分别为三个div绑定单击响应函数
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");

				bind(box1, "click", function() {
					alert("我是box1的响应函数")
				});
				bind(box2, "click", function() {
					alert("我是box2的响应函数")
				});
				bind(box3, "click", function() {
					alert("我是box3的响应函数")
				});
			};

			function bind(obj, eventStr, callback) {
				if (obj.addEventListener) {
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr, callback, true);
				} else {
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on" + eventStr, function() {
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
		</script>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
	</body>
</html>

P118 118.尚硅谷_JS基础_拖拽（一） 19:15

拖拽的流程：

  1. 当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown。
  2. 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove。
  3. 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup。

  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {	 // 拖拽box1元素  
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event) {
					event = event || window.event;
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event) {
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX;
						var top = event.clientY;
						//修改box1的位置
						box1.style.left = left + "px";
						box1.style.top = top + "px";
					};
					//为document绑定一个鼠标松开事件
					document.onmouseup = function() {
						//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
					};
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

P119 119.尚硅谷_JS基础_拖拽（二） 09:42

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() { // 拖拽box1元素  
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event) {
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event) {
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						//修改box1的位置
						box1.style.left = left + "px";
						box1.style.top = top + "px";
					};
					//为document绑定一个鼠标松开事件
					document.onmouseup = function() {
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
					};
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

P120 120.尚硅谷_JS基础_拖拽（三） 24:27

测试IE8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				//分别为两个按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				btn01.onclick = function() {
					alert(1);
				};
				btn02.onclick = function() {
					alert(2);
				};
				//设置btn01对鼠标按下相关的事件进行捕获
				//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
				btn01.setCapture();
			};
		</script>
	</head>
	<body>
		<button id="btn01">按钮01</button>
		<button id="btn02">按钮02</button>
	</body>
</html>

拖拽2 代码

  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}

			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */

				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event) {
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/* if (box1.setCapture) {
						box1.setCapture();
					} */
					box1.setCapture && box1.setCapture();
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;

					//为document绑定一个onmousemove事件
					document.onmousemove = function(event) {
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						//修改box1的位置
						box1.style.left = left + "px";
						box1.style.top = top + "px";
					};

					//为document绑定一个鼠标松开事件
					document.onmouseup = function() {
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						box1.releaseCapture && box1.releaseCapture();
					};

					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
				};
			};
		</script>
	</head>
	<body>
		我是一段文字
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

拖拽3 代码——拖拽图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */

				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img1 = document.getElementById("img1");

				drag(box1); // 开启box1的拖拽
				drag(box2); // 开启box2的拖拽
				drag(img1);
			};

			/*
			 * 提取一个专门用来设置拖拽的函数
			 * 参数：开启拖拽的元素
			 */
			function drag(obj) {
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				obj.onmousedown = function(event) {
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					obj.setCapture && obj.setCapture();
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;

					//为document绑定一个onmousemove事件
					document.onmousemove = function(event) {
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						//修改box1的位置
						obj.style.left = left + "px";
						obj.style.top = top + "px";
					};

					//为document绑定一个鼠标松开事件
					document.onmouseup = function() {
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						obj.releaseCapture && obj.releaseCapture();
					};

					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
				};
			}
		</script>
	</head>
	<body>
		我是一段文字！
		<div id="box1"></div>
		<div id="box2"></div>
		<img src="img/an.jpg" id="img1" style="position: absolute;" />
	</body>
</html>

P121 121.尚硅谷_JS基础_滚轮的事件 22:27

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

  

event.wheelDelta：获取鼠标滚轮滚动的方向

在火狐中使用event.detail来获取滚动的方向

wheelDelta 这个值，我们不看大小、只看正负。

处理“滚动条”

滚轮事件-代码

  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				//获取id为box1的div
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标滚轮滚动的事件
				/*
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
				 * 	但是火狐不支持该属性
				 * 
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
				 * 	注意该事件需要通过addEventListener()函数来绑定
				 */
				box1.onmousewheel = function(event) {
					event = event || window.event;
					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚 120   向下滚 -120
					//wheelDelta这个值我们不看大小，只看正负
					//alert(event.wheelDelta);

					//wheelDelta这个属性火狐中不支持
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚 -3  向下滚 3
					//alert(event.detail);

					/*
					 * 当鼠标滚轮向下滚动时，box1变长
					 * 	当滚轮向上滚动时，box1变短
					 */
					//判断鼠标滚轮滚动的方向
					if (event.wheelDelta > 0 || event.detail < 0) {
						//向上滚，box1变短
						box1.style.height = box1.clientHeight - 10 + "px";
					} else {
						//向下滚，box1变长
						box1.style.height = box1.clientHeight + 10 + "px";
					}

					/*
					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
					 * 需要使用event来取消默认行为event.preventDefault();
					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
					 */
					event.preventDefault && event.preventDefault();
					/*
					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
					 */
					return false;
				};
				//为火狐绑定滚轮事件
				bind(box1, "DOMMouseScroll", box1.onmousewheel);
			};
			function bind(obj, eventStr, callback) {
				if (obj.addEventListener) {
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr, callback, false);
				} else {
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on" + eventStr, function() {
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="box1"></div>
	</body>
</html>

P122 122.尚硅谷_JS基础_键盘事件 24:02

事件句柄（Event Handlers）

鼠标 / 键盘 属性

IE 属性

键盘事件

onkeydown

  • 按键被按下。
  • 对于onkeydown来说：如果一直按着某个按键不松手，则事件会一直触发。
  • 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。

onkeyup

  • 按键被松开。

键盘事件，一般都会绑定给一些可以获取到焦点的对象或者是document。

通过keyCode来获取按键的编码

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

使文本框中不能输入数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				document.onkeydown = function(event) {
					event = event || window.event;
					/*
					 * 可以通过keyCode来获取按键的编码
					 * 	通过它可以判断哪个按键被按下
					 * 除了keyCode，事件对象中还提供了几个属性
					 * 	altKey
					 * 	ctrlKey
					 * 	shiftKey
					 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
					 * 			如果按下则返回true，否则返回false
					 */
					//console.log(event.keyCode);

					//判断一个y是否被按下
					//判断y和ctrl是否同时被按下
					if (event.keyCode === 89 && event.ctrlKey === 17) {
						console.log("ctrl和y都被按下了");
					}
				};

				/* document.onkeyup = function() {
					console.log("按键松开了");
				}; */

				var input = document.getElementsByTagName("input")[0]; // 获取input
				input.onkeydown = function(event) {
					event = event || window.event;
					//console.log(event.keyCode);
					//数字 48 - 57
					//使文本框中不能输入数字
					if (event.keyCode >= 48 && event.keyCode <= 57) {
						//在文本框中输入内容，属于onkeydown的默认行为
						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
						return false;
					}
				};
			};
		</script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

P123 123.尚硅谷_JS基础_键盘移动div 08:59

使div可以根据不同的方向键向不同的方向移动

按方向键的同时，按“Ctrl”键   会加速。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移...
			 */
			window.onload = function() {
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event) {
					event = event || window.event;
					//定义一个变量，来表示移动的速度
					var speed = 10;
					//当用户按了ctrl以后，速度加快
					if (event.ctrlKey) {
						speed = 50;
					}
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch (event.keyCode) {
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

理论上，明天能看完~   冲冲冲~

upward337
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript 键盘事件总结 推荐
12-12
键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件，连同上面的归纳如下： 1. 如果表单里有一个type=”submit”的按钮，回车键生效。 2. 如果表单里...
关于window.onclick事件的问题
qq_20565303的专栏
02-02 1万+
window.onclick = function(event) { alert(1); } window.onclick = function(event) { alert(2); } 这个在浏览器中执行，只是打印了2，说明这个监听事件，只监听了第二个方法，所以这个方法，在页面中只能使用一个，然后将其他的方法使用if分支加以区分，其中event获取的是点击事件的所处的标签。
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 7789
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
⑦JavaScript 事件
一个努力学习的程序猿
04-09 232
JavaScript事件事件对象 Event ※例 ※ （clientX cilentY）练习 ※ （使div可以跟随鼠标移动）事件的冒泡 ※ （Bubble）例事件的委派 ※事件的绑定 ※事件的传播 ※总结 ※※ 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷 事件 • 关于事件实际上我们已经初步接触过了，指的就是用户与浏览器交互的一...
【js基础】事件对象
在热爱技术的路上一直前行。
05-26 3838
1.什么是事件对象 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。 结果： 可以将代码中的event换成e，当我们注册事件时，event对象会被系统自动创建，并以此传递给事件处理函数。我们不需要传递实参。 2. 事件对象的兼容性方案 3. 事件对象的常见属性和方法 事件对象属性和方法 说明 e.target 返
input按钮onclick大全
anyx的专栏
09-04 1万+
INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1>      INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2>      INPUT onclick=docum
JavaScript键盘事件常见用法实例分析
12-11
本文实例讲述了JavaScript键盘事件常见用法。分享给大家供大家参考，具体如下： JavaScript 键盘事件有以下3种 keydown 键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。 keypress 键盘非功能按键...
javascript中键盘事件用法实例分析
12-11
本文实例分析了javascript中键盘事件用法。分享给大家供大家参考。具体如下： 键盘事件包含onkeydown、onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} [removed] = keyDown; //论按下键盘上的哪个...
JavaScript监听键盘事件代码实现
10-15
主要介绍了JavaScript监听键盘事件代码实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS的事件对象详解
最新发布
qq_44741577的博客
02-01 1081
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（等）、目标元素、鼠标位置、按键状态等）。JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。event.type - 获取事件类型（例如，“click”、"mousedown"等）。
js onclick跳转页面方法（window.open）
热门推荐
冷夜轩的博客
03-24 1万+
var a = document.getElementsByName("imageField2");     a[0].onclick= function (){  var contextPath= document.getElementById("contextPath").value.trim(); window.open(contextPath+"/portal/share/compo
js事件高级-事件对象
phoebemeng的博客
07-14 218
什么是事件对象？ e.target和this的区别 如何阻止事件冒泡
document.onclick vs window.onclick
weixin_30299539的博客
09-28 271
The JavaScript Window object is the highest level JavaScript object which corresponds to the web browser window. 最外层的JavaScript对象其对应于web浏览器窗口 The document object is the container for all HTML HEAD a...
操作元素之修改样式属性
leechoy
06-12 601
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
JS-事件对象
ImmortalSYM的博客
08-30 160
JS-事件对象 事件对象简介 事件对象 —当事件响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递给响应函数； —在事件对象中封装了当前事件的一切信息，比如鼠标坐标、键盘哪个按键被按下、鼠标滚轮滚动方向等； —具体可以查看事件对象中相关属性，比如鼠标/键盘相关属性，例如button属性，返回事件被触发时，哪个鼠标按钮被点击； —在IE8中，响应函数被触发时，浏览器不会传递事件对象这个参数，在IE8及以下的浏览器中，将事件对象作为window对象的属性保存的；因此为了兼容IE8浏览器，可以通过
【js】如何点击按钮通过onclick打开新页面 和 在本页面打开
firstbird的博客
07-27 1万+
window.location.href =""; window.open();
js - 事件对象
weixin_57135131的博客
11-10 1319
js 事件对象。
JavaScript事件，window的事件
小谭鸡米花的博客
01-20 2653
事件是发生后并得到处理的操作 一、页面相关的事件 window.onload；表示等页面所有内容（文档，图片，js，src等）加载完毕执行的代码 window.onscroll； window.onscroll = function（）{ Console.log（“滚动条滚动时触发的事件”）； } window.onresize； window.onresize= function（）{ Console.log（“窗口大小发生改变时触发的事件”）； } 二、鼠标事件
JS事件对象
qq_48439911的博客
04-13 1700
什么是事件对象 eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}） 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt ，现在一般写 e。 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它
在div标签中使用v-on:keydown绑定键盘事件
07-14
当你想要在`div`标签中绑定键盘事件时，你可以使用`v-on:keydown`指令来监听按键事件。同样，你也可以使用简写形式`@keydown`。 以下是一个示例，演示如何在`div`标签中使用`v-on:keydown`： ```html <div v-on:keydown="handleKeyDown">按下键盘</div> ``` 上述代码中，我们使用`v-on:keydown`或`@keydown`来监听键盘按下事件，并指定了一个名为`handleKeyDown`的方法。当用户在该`div`元素上按下键盘时，`handleKeyDown`方法将会被调用。 你可以在Vue.js实例的方法中定义`handleKeyDown`方法，以执行你想要的操作。例如： ```javascript new Vue({ methods: { handleKeyDown(event) { console.log('按下键盘', event.key); // 在这里执行你的操作 } } }); ``` 在上述代码中，我们传递了一个参数`event`给`handleKeyDown`方法，它包含了有关按键事件的信息。你可以通过`event.key`来获取用户按下的具体键值。 当用户按下键盘时，控制台将会打印出"按下键盘"以及用户按下的键值。你可以根据需要执行任何操作，例如根据不同的键值执行不同的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

upward337

谢谢老板~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值