1.事件（Event）
事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
我们可以为事件来绑定回调函数来响应事件。
绑定事件的方式：
1.可以在标签的事件属性中设置相应的JS代码
例子：
<button onclick="js代码。。。">按钮</button>
2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
例子：
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
2.文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，
此时将会无法正常获取到DOM对象，导致DOM操作失败。
解决方式一：
可以将js代码编写到body的下边
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn")
btn.onclick = function(){
alert("我是放在后边的script！！")
}
</script>
</body>
解决方式二：
将js代码编写到window.onload = function(){}中
window.onload 对应的回调函数会在整个页面加载完毕以后才执行，
所以可以确保代码执行时，DOM对象已经加载完毕了
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
};
};
</script>
知识拓展document.ready和window.onload的区别
一、document.ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
DOM结构绘制完成之后就会执行，这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行
//jquery的写法
$(function(){
// do something
});
二、window.onload，指示页面包含图片等文件在内的所有元素都加载完成。
必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。
window.onload=function(){
//do something
}
//或者经常用到的图片
document.getElementById("imgID").onload=function(){
//do something
}
3.事件详细介绍
1.事件对象
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向等。
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象是没有实参传递的，而是将事件对象作为window对象的属性保存。
为保证兼容性，可以使用以下代码保证event事件的正确性：
元素.事件 = function(event){
event = event || window.event;
};
元素.事件 = function(e){
e = e || event;
};
①获取鼠标相对于当前可见窗口的坐标：event.clientX和event.clientY 用于获取鼠标在指定窗口内部的坐标。
例子：实现一个功能，在一个指定窗口移动鼠标，在其下方的窗口中显示鼠标的坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 200px;
height: 20px;
}
</style>
<script>
window.onload = function() {
var areaDiv = document.getElementById('areaDiv');
var showMsg = document.getElementById('showMsg');
areaDiv.onmousemove = function(event) {
event = event || window.event;
var x = event.clientX;
var y = event.clientY;
showMsg.innerHTML = 'x='+x+', '+'y='+y;
}
};
</script>
</head>
<body>
<div id='areaDiv'></div>
<div id='showMsg'></div>
</body>
</html>
PS：div的偏移量，是相对于整个页面的。
②获取鼠标相对于当前页面的坐标：pageX和pageY。
2.事件的冒泡（Bubble）
事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消。
可以将事件对象的cancelBubble设置为true，即可取消冒泡。
例子：
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};
//若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容\
if (e && e.stopPropagation) {
// this code is for Mozilla and Opera
e.stopPropagation();
} else if (window.event) {
// this code is for IE
window.event.cancelBubble = true;
}
阻止事件冒泡方法\
- 1.event.stopPropagation()方法这是阻止事件的冒泡方法，不止事件向document上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开
- 2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素
- 3.return false;这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件，不仅阻止了事件往上冒泡，而且阻止了事件本身
3.事件的委派
指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的也可以实现此事件功能。
我们可以尝试将其绑定给元素的共同的祖先元素，这样当需要实现某些特定元素的事件功能时，可以使用target.className的方式指定特定对象。、
target : event中的target表示的触发事件的对象
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function() {
var ul01 = document.getElementById("ul01");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var newli = document.createElement("li");
newli.innerHTML = "<a href='javascript:;' class='clc'>新的链接</a>";
ul01.appendChild(newli);
}
ul01.onclick = function(event){
event = event || window.event;
if(event.target.className == "clc"){
alert("事件委派！！");
}
}
};
</script>
</head>
<body>
<button id="btn01">增加新连接</button>
<ul id="ul01">
<li><a href="javascript:;" class="clc">链接1</a></li>
<li><a href="javascript:;" class="clc">链接2</a></li>
<li><a href="javascript:;" class="clc">链接2</a></li>
</ul>
</body>
</html>
4.事件的绑定
①addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
- 1.事件的字符串，不要on
- 2.回调函数，当事件触发时该函数会被调用
- 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function() {
var btn01 = document.getElementById("btn01");
btn01.addEventListener("click", function(){
alert(1);
}, false);
btn01.addEventListener("click", function(){
alert(2);
}, false);
};
</script>
</head>
<body>
<button id="btn01">点击</button>
</body>
</html>
但是这个方法不支持IE8及以下的浏览器，若想在IE中实现此功能，考虑使用：
②attachEvent()在IE8中可以使用attachEvent()来绑定事件
参数：
- 1.事件的字符串，要on
- 2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数， 不同的是它是后绑定先执行，执行顺序和addEventListener()相反。
例子：
btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});
5.完成bind()函数
由于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);
});
}
}
6.事件的传播
关于事件的传播网景公司和微软公司有不同的理解 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， 然后在向内传播给后代元素 W3C综合了两个公司的方案，将事件传播分成了三个阶段
- 1.捕获阶段在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
- 2.目标阶段事件捕获到目标元素，捕获结束开始在目标元素上触发事件
- 3.冒泡阶段事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。
IE8及以下的浏览器中没有捕获阶段。
4.常用事件
1.鼠标事件
1.1拖拽BOX1元素
① 拖拽的流程
1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
height:100px;
width:100px;
position:absolute;//要有定位是为了能够使用js来进行行内样式设置
background-color: red;
}
</style>
<script>
window.onload = function() {
var box1 = document.getElementById("box1");
box1.onmousedown = function(){
document.onmousemove = function(event){
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left+"px";
box1.style.top = top+"px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
在上例中，div对象会跟着鼠标移动，但是每次移动默认会将左上角与鼠标位置对齐，导致展现出来的效果不太和谐，可以使用简单的加减法解决这一问题：
② event.clientX：鼠标相对于当前窗口的水平距离 obj.offsetLeft：元素左侧相对于当前窗口左侧的偏移量 如下图所示：
其中，绿色即为鼠标clientX的数值，红色为box1的offsetLeft数值，两者相减即可求得当按下鼠标那一刻，box1相对于原位置的水平偏移量ol，即蓝色。最后用鼠标的clientX减去ol，得到box1的left值。
同理，box1的top值也可用clientY，offsetTop经过计算求得。
③编写拖拽函数drag()
代码：
<!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>
1.2 滚轮事件
代码：
<!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>
2.键盘事件
2.1 键盘事件\
①onkeydown：按键被按下
对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。
②onkeyup
按键被松开，只会触发一次。
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。\
2.2 键盘事件附带的属性
keyCode
可以通过keyCode来获取按键的Unicode编码
通过它可以判断哪个按键被按下
除了keyCode，事件对象中还提供了几个属性
- altKey
- ctrlKey
- shiftKey
这三个属性用来判断alt ctrl 和 shift是否被按下 如果按下则返回true，否则返回false
例子1：判断ctrl键和y键是否同时被按下
//console.log(event.keyCode);
//判断一个y是否被按下
//判断y和ctrl是否同时被按下
if(event.keyCode === 89 && event.ctrlKey){
console.log("ctrl和y都被按下了");
}
例子2：实现输入框不能输入数字的功能
input.onkeydown = function(event) {
event = event || window.event;
//数字 48 - 57
//使文本框中不能输入数字
if(event.keyCode >= 48 && event.keyCode <= 57) {
//在文本框中输入内容，属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
return false;
}
};
在例2中，通过返回false可以关闭input对象的默认操作，使当在输入框中输入数字时，不会显示出来。
2.3 实现方块移动功能
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
box1 = document.getElementById("box1");
document.onkeydown = function(event){
event = event || window.event;
var speed = 10;
if(event.ctrlKey){
speed = 50;
}
switch(event.keyCode){
case 37:
//alert("向左");
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
default:
break;
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
