目录
事件对象
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向等等
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存
代码示例：
元素.事件 = function(event){
event = event || window.event;
};
元素.事件 = function(e){
e = e || event;
};获取鼠标的坐标
- clientX和clientY
用于获取鼠标在当前的可见窗口的坐标。（div的偏移量，是相对于整个页面的，如果页面大于了可见窗口的大小，那么容易出现问题）
- pageX和pageY
可以获取鼠标相对于当前整个页面的坐标。（但是这两个属性在IE8中不支持）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟随鼠标移动</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: #3e9dee;
/*开启box1的绝对定位或者相对定位*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
// div可以跟随鼠标移动
// 1 获取box1
var box1 = document.getElementById("box1");
// 2 绑定鼠标移动事件
// 如果这里document是box1，给box1绑定，那只有鼠标在box1里面，才能移动。document则是整个文档
document.onmousemove = function (event) {
// 3 解决兼容问题
event = event || window.event;
// 获取鼠标的坐标
var x = event.clientX;
var y = event.clientY;
// 设置div的偏移量
box1.style.left = x+"px";
box1.style.top = y+"px";
};
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>优化代码示例（针对于鼠标和拖动目标的相对位置优化） ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 开启box1的绝对定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 使div可以跟随鼠标移动
*/
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event){
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html，即documentElement.scrollTop
*/
//哪个有则用哪个
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到鼠标的坐标
/*
*
* div的偏移量，是相对于整个页面的
*
* clientX和clientY是相对于当前可视窗口的坐标
* pageX和pageY可以获取鼠标相对于当前整个页面的坐标
* 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
};
</script>
</head>
<!--将浏览器网页变长-->
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
</body>
</html>
事件的冒泡（Bubble）
事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
可以将事件对象的cancelBubble设置为true，即可取消冒泡
取消冒泡示例：
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 开启box1的绝对定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 使div可以跟随鼠标移动
*/
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event){
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到鼠标的坐标
/*
* clientX和clientY
* 用于获取鼠标在当前的可见窗口的坐标
* div的偏移量，是相对于整个页面的
*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
var box2 = document.getElementById("box2");
box2.onmousemove = function(event){
event = event || window.event;
event.cancelBubble = true;
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
<div id="box1"></div>
</body>
</html>
事件的委派
事件的委派指的是统一给元素的共同的祖先元素，这样当后代元素上的时间出发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序性能。
如果希望只绑定一次事件，即可应用到多个元素上（即使元素是后天添加的也可以）。可以尝试将其绑定给元素的共同祖先元素。
target：event中的target表示的触发事件的对象。
代码示例：
<!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(){
//创建一个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(){
alert("我是a的单击响应函数！！！");
};
}*/
/*
* 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
* 我们可以尝试将其绑定给元素的共同的祖先元素
*
* 事件的委派
* - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
* 从而通过祖先元素的响应函数来处理事件。
* - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*/
//为ul绑定一个单击响应函数
u1.onclick = function(event){
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>
事件的绑定
addEventListener() 通过这个方法也可以为元素绑定响应函数。
参数：
- 事件的字符串，如onclink，但是不要on。
- 回调函数，当事件触发时该函数会被调用。
- 是否在捕获阶段触发事件，需要设定一个布尔值，一般是传false
注意细节：
- addEventListener() 可以同时为一个元素的相同事件绑定多个响应函数。但事件被触发时，响应函数会按照函数的绑定顺序进行执行。
- 此方法不支持IE8及其以下的浏览器。
代码示例：
btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);attachEvent() 方法
参数：
- 事件的字符串，要on。
- 回调函数。
注意细节：
- 此方法可以同时为一个事件绑定多个处理函数。
- 相较于addEventListener()的是：此方法是后绑定先执行，且执行顺序和addEventListener()相反。
- 此方法支持IE8浏览器。
代码示例：
btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});代码示例：（执行创建bind函数，解决兼容性问题）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/*点击按钮以后弹出一个内容*/
//获取按钮对象
var btn01 = document.getElementById("btn01");
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浏览器及以下
//前面不要事件字符串不要on，在这里将其加上
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
事件的传播
W3C提供的方案：
- 捕获阶段：在捕获阶段从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时是不会触发事件的。
- 目标阶段：事件捕获到目标元素，捕获结束，开始在目标元素上触发事件。
- 冒泡阶段：事件从目标元素向它的祖先元素传递，依次触发祖先元素上的时间。
注意细节：
- 冒泡阶段触发的顺序问题：如果希望在捕获阶段就触发事件，可以将addEventListener() 的第三个参数设置为True
- 但是一般情况下，不会在捕获阶段触发事件，通常是设置为false。
- IE8及以下的浏览器中没有捕获阶段。
常用事件
鼠标拖拽事件：
<!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");
//开启box1的拖拽
drag(box1);
//开启box2的
drag(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>滚轮事件（onwheel）
<!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>键盘事件
| 属性 | 描述 |
|---|---|
| onkeydown | 按键被按下（只要不松手事件会一直触发） |
| onkeyup | 按键被松开 |
| keyCode | 可以通过keyCode来获取按键的编码 |
| altKey | 判断alt是否被按下（按下返回true，否则返回false，下同） |
| ctrlKey | 判断ctrl是否被按下 |
| shiftKey | 判断shift是否被按下 |
注意细节：
- 当onkeydown连续触发的情况，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。
- 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
检测y和ctrl是否同时被按下，代码示例：
//console.log(event.keyCode);
//判断一个y是否被按下
//判断y和ctrl是否同时被按下
if(event.keyCode === 89 && event.ctrlKey){
console.log("ctrl和y都被按下了");
}检测数字是否被按下，代码示例：
input.onkeydown = function(event) {
event = event || window.event;
//数字 48 - 57
//使文本框中不能输入数字
if(event.keyCode >= 48 && event.keyCode <= 57) {
//在文本框中输入内容，属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
return false;
}
};