第11节 事件对象、冒泡、委派、绑定、传播、滚轮的事件、键盘事件
事件对象
1、onmousemove
该事件将会在鼠标在元素中移动时被触发
2、事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向等等。
注意：在IE8中，响应函数被触发时，浏览器不会传递事件对象。在IE8及以下的浏览器中，是将事件对象作为 window对象 的属性保存的。
clientX 可以获取鼠标指针的水平坐标clientY 可以获取鼠标指针的垂直坐标
3、解决事件对象兼容性的问题
在IE8及以下的浏览器中，是将事件对象作为 window对象的属性 保存的
//方式一
if (!event) {
event = window.event;
}
// 方式二(更常用)
event = event || window.event;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件对象</title>
<style>
#areaDiv {
width: 300px;
height: 100px;
border: 2px solid black;
}
#showMsg {
width: 300px;
height: 25px;
border: 2px solid black;
}
</style>
<script>
window.onload = function () {
//当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
areaDiv.onmousemove = function (event) {
// 解决事件对象兼容性的问题，
event = event || window.event;
//clientX可以获取鼠标指针的水平坐标
//clientY可以获取鼠标指针的垂直坐标
var x = event.clientX;
var y = event.clientY;
// 在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = " + x + " , y = " + y;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<br>
<div id="showMsg"></div>
</body>
</html>
4、练习（div跟随鼠标移动）
1）获取到鼠标的坐标
（1）clientX 和 clientY
用于获取鼠标在当前的可见窗口的坐标，而 div 的偏移量是相对于整个页面的。
（2）pageX 和 pageY
可以用于获取鼠标相对于当前页面的坐标，但是这两个属性在 IE8 中不支持，所以如果需要兼容 IE8，则不要使用
2）获取滚动条滚动的距离
（1）chrome 认为浏览器的滚动条是 body 的，可以通过 body.scrollTop 来获取。
（2）火狐等浏览器认为浏览器的滚动条是 html 的，可以通过 documentElement.scrollTop 来获取。
// 获取垂直滚动条滚动的距离
var st = document.documentElement.scrollTop || document.body.scrollTop;
// 获取水平滚动条滚动的距离
var sl = document.documentElement.scrollWidth || document.body.scrollWidth;
事件的冒泡（Bubble）
1、所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
2、在开发中，大部分情况冒泡都是有用的。如果不希望发生事件冒泡可以通过事件对象来取消。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的冒泡</title>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: rgb(36, 131, 240);
}
#s1 {
background-color: rgb(224, 204, 21);
}
</style>
<script type="text/javascript">
window.onload = function () {
// 为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function (event) {
event = event || window.event;
alert("我是span的单击响应函数");
// 取消冒泡
// 可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble = true;
}
// 为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function () {
event = event || window.event;
alert("我是div的单击响应函数");
event.cancelBubble = true;
}
// 为body绑定一个单击响应函数
document.body.onclick = function () {
alert("我是body的单击响应函数");
}
}
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
事件的委派
1、所谓的事件的委派指的就是将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
2、事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
3、event 中的 target 表示的是触发事件的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的委派</title>
<script>
window.onload = function () {
// 点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// 创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"
// 将li添加到ul中
u1.appendChild(li);
}
// 获取所有的a
var allA = document.getElementsByTagName("a");
//为每一个超链接绑定一个单击响应函数
//这种操作比较麻烦，而且只能为已有的超链接设置事件，新添加的超链接必须重新绑定
// 遍历
// for (var i = 0; i < allA.length; i++) {
// allA[i].onclick = function () {
// }
// }
// 希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的
// 可以尝试将其绑定给元素的共同的祖先元素上
// 为ul绑定一个单击响应函数
u1.onclick = function (event) {
event = event || window.event;
// target
// event中的target表示的是触发事件的对象
// 如果触发事件的对象是期望的元素，则执行否则不执行
if (event.target.className == "link") {
alert("我是ul的单击响应函数");
}
}
}
</script>
</head>
<body>
<input type="button" value="添加超链接" id="btn01">
<br>
<ul id="u1">
<li><a href="javascript:;" class="link">超链接1</a></li>
<li><a href="javascript:;" class="link">超链接2</a></li>
<li><a href="javascript:;" class="link">超链接3</a></li>
</ul>
</body>
</html>
事件的绑定
1、使用 对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，后边会覆盖掉前面的。
2、addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
（1）事件的字符串，不要 on
（2）回调函数，当事件触发时该函数会被调用
（3）是否在捕获阶段触发事件，需要一个布尔值，一般都传 false。
使用 addEventListener() 可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
// 获取按钮对象
var btn01 = document.getElementById("btn01");
btn01.addEventListener("click", function () {
alert("1");
}, false)
btn01.addEventListener("click", function () {
alert("2");
}, false)
3、attachEvent()
在IE8中可以使用 attachEvent() 来绑定事件
参数：
（1）事件的字符串，要 on
（2）回调函数
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和 addEventListener() 相反。
btn01.attachEvent("onclick", function(){
alert(1);
})
btn01.attachEvent("onclick", function(){
alert(2);
})
4、定义一个函数，用来为指定元素绑定响应函数
参数：
（1）obj ----- 要绑定事件的对象
（2）eventStr ----- 事件的字符串（不要 on）
（3）callback ----- 回调函数
注意：addEventListener() 中的 this，是绑定事件的对象；attachEvent 中的 this，是window。需要统一两个方法的 this。
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);
});
}
}
事件的传播
W3C综合了微软和网景公司的方案，将事件传播分成了三个阶段：
（1）捕获阶段：
在捕获阶段是从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
（2）目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
（3）冒泡阶段
事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件。
如果希望在捕获阶段就触发事件，可以将 addEventListener() 的第三个参数设置为 true。但是，一般情况下，我们不希望在捕获阶段触发事件，所以这个参数一般都是 false。
注意：IE8以下的浏览器没有捕获阶段
练习（拖拽）
拖拽的流程：
1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2、当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3、当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
在这里插入代码片
鼠标与被拖拽元素的相对位置
注意：当拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这是浏览器提供的默认行为。可以通过 return false 来取消这个行为。但是，该方法不适用于 IE8。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: rgb(20, 139, 194);
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: rgb(211, 191, 16);
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
drag(box1);
drag(box2);
function drag(obj) {
// 为document绑定一个鼠标按下事件
// 当鼠标在被拖拽元素上按下时，开始拖拽 onm ousedown
document.onmousedown = function (event) {
// 设置box1捕获所有鼠标按下的事件
// setCapture()只有IE支持，
// 但是在火狐中调用时不会报错，而在chrome调用，会报错
// if (box1.setCapture) {
// box1.setCapture();
// }
obj.setCapture && obj.setCapture();
event = event || window.event;
// div的水平偏移量 鼠标.clientX - 元素.offsetLeft
// div的垂直偏移量 鼠标.clientY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function (event) {
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动 onm ousemove
//获取鼠标坐标
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 () {
// 当鼠标松开时，被拖拽元素固定在当前位置 onm ouseup
// 取消document的 onm ousemove 事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
// if (box1.releaseCapture) {
// box1.releaseCapture();
// }
obj.releaseCapture && obj.releaseCapture();
}
return false;
}
}
}
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
滚轮的事件
1、onmousewheel 鼠标滚轮滚动的事件。但是，火狐不支持该属性。
在火狐中需要使用DOMMouseScroll 来绑定滚动事件，注意该事件需要通过 addEventListener() 函数来绑定。
2、判断鼠标滚轮滚动的方向
（1）event.wheelDelta 可以获取鼠标滚轮滚动的方向
向上滚 120，向下滚 -120
（2）在火狐中不支持 wheelDelta 属性，在火狐中使用 event.detail 来获取滚动的方向。
向上滚 -3，向下滚 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚轮的事件</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: rgb(12, 154, 236);
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
box1.onmousewheel = function (event) {
// 判断鼠标滚轮滚动的方向
if (event.wheelDelta > 0 || event.detail < 0) {
// 滚轮向上滚动时，box1变短
box1.style.height = box1.clientHeight - 10 + "px";
} else {
// 滚轮向下滚动时，box1变长
box1.style.height = box1.clientHeight + 10 + "px";
}
}
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);
});
}
}
// 为火狐绑定滚轮事件
bind(box1, "DOMMouseScroll", box1.onmousewheel)
// 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用 return false
// 需要使用event来取消默认行为
//兼容IE8和chrome
event.preventDefault && event.preventDefault();
// 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
// 这是浏览器的默认行为，如果不希望发生，则可取消默认行为
return false;
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
键盘事件
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是 document。
1、onkeydown
（1）按键被按下
（2）对于 onkeydown 来说如果一直按着某个按键不松手，则事件会一直触发
（3）当 onkeydown 连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快。这种设计是为了防止误操作的发生。
（4）在文本框中输入内容，属于 onkeydown 的默认行为。如果在 onkeydown 中取消了默认行为（return false;），则输入的内容不会出现在文本框中。
2、onkeyup 按键被松开
3、可以通过 keyCode 来获取按键的编码，通过它可以判断哪个按键被按下。
除了 keyCode ，事件对象中还提供了几个属性，altKey 、ctrlKey 、shiftKey。这三个用来判断 alt、ctrl 、shift 是否被按下，如果按下则返回 true，否则返回 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘移动div</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: rgb(12, 117, 236);
position: absolute;
}
</style>
<script type="text/javascript">
// 使div可以根据不同的方向键向不同的方向移动
window.onload = function () {
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:
// 向左
box1.style.left = box1.offsetLeft - 10 - speed + "px";
break;
case 39:
// 向右
box1.style.left = box1.offsetLeft + 10 + speed + "px";
break;
case 38:
// 向上
box1.style.top = box1.offsetTop - 10 - speed + "px";
break;
case 40:
// 向下
box1.style.top = box1.offsetTop + 10 + speed + "px";
break;
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>