这篇博客介绍了JavaScript中的事件处理，包括事件委派、事件绑定、事件传播等概念，详细讲解了如何实现元素的拖拽功能，并探讨了在不同浏览器中处理事件的差异。内容涵盖事件的冒泡、捕获阶段以及拖拽过程中的细节处理，如阻止默认行为和处理滚轮事件。此外，还展示了如何使用addEventListener和attachEvent来兼容不同浏览器的事件处理。
学习地址：
JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】
目 录
P116 116.尚硅谷_JS基础_完成bind函数 08:58
onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发
在onkeydown中取消默认行为：输入的内容，不会出现在文本框中
P123 123.尚硅谷_JS基础_键盘移动div 08:59
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()：通过这个方法也可以为元素绑定响应函数。
参数：
- 事件的字符串，click不要on。
- 回调函数，当事件触发时 该函数会被调用。
- 是否在捕获阶段触发事件，需要一个布尔值，一般都传false。
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，这个方法不支持IE8及以下的浏览器。
attachEvent()：绑定事件【IE8】
attachEvent()：在IE8中可以使用attachEvent()来绑定事件
参数：
- 事件的字符串，onclick要on。
- 回调函数。
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和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综合了两个公司的方案，将事件传播分成了三个阶段：
- 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
- 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
- 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
- 如果希望在捕获阶段就触发事件，可以将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
拖拽的流程：
- 当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown。
- 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove。
- 当鼠标松开时，被拖拽元素固定在当前位置：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>理论上，明天能看完~ 冲冲冲~
扫一扫
6387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
