事件
事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
JavaScript 与 HTML 之间的交互是通过事件实现的。
对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、
按下键盘上某个键等等。
我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行。
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">
我是一个按钮
</button>
可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时，
其对应的函数将会被调用,像这种为单击事件绑定的函数，我们称为单击响应函数。
// html
<button id="btn">我是一个按钮</button>
// js
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你还点~~~");
};
常见的HTML事件：
事件的兼容
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向。。。
在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，
是将事件对象作为window对象的属性保存的。
// 解决事件对象的兼容性问题
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;
事件的冒泡（Bubble）
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，
其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡，可以通过事件对象来取消冒泡
取消冒泡：
w3c 的方法是 e.stopPropagation
IE 则是使用 e.cancelBubble = true
IE9 之前的IE不支持 stopPropagation() 方法。
相反，IE事件对象有一个 cancleBubble 属性，设置这个属性为 true 能阻止事件进一步传播。
（ IE8 及之前版本不支持事件传播的捕获阶段，所以冒泡是唯一待取消的事件传播。）
// 取消事件冒泡兼容方法
function stopHandler(event){
window.event ? window.event.cancelBubble=true : event.stopPropagation();
}
事件的委派
为每一个超链接都绑定一个单击响应函数，这种操作比较麻烦，
而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定。
我们希望，只绑定一次事件，即可应用到多个的元素上，
即使元素是后添加的也可以将事件绑定给元素的共同的祖先元素。
事件的委派
指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
event中的target表示的触发事件的对象（event.target）
事件的绑定
addEventListener()
通过这个方法也可以为元素绑定多个响应函数
参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，
需要使用event来取消默认行为event.preventDefault();
但是IE8不支持event.preventDefault()这个玩意，如果直接调用会报错。
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。
参数：
1.事件的字符串，要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。
绑定事件的兼容代码：
// addEventListener()中的this，是绑定事件的对象
// attachEvent()中的this，是window
// 需要统一两个方法this
/*
* 参数：
* el 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
*/
function bindEventListener(el , eventStr , callback){
if(el.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
// 在匿名函数中调用回调函数
// 绑定this指向绑定事件的对象
callback.call(el);
});
}
}
事件的传播
关于事件的传播网景公司和微软公司有不同的理解：
微软公司认为事件应该是由内向外传播，也就是当事件触发时，
应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，
也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，
应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。
W3C综合了两个公司的方案，将事件传播分成了三个阶段
1. 捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，
但是默认此时不会触发事件
2. 目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3. 冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件，
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。
IE8及以下的浏览器中没有捕获阶段。
自定义元素拖曳API
/*
* 提取一个专门用来设置拖拽的函数
* 参数：开启拖拽的元素
*/
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;
};
}
滚轮事件
onmousewheel
鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性。
event.wheelDelta 可以获取鼠标滚轮滚动的方向
向上滚 120 向下滚 -120
wheelDelta这个值我们不看大小，只看正负
wheelDelta这个属性火狐中不支持
DOMMouseScroll
在火狐中需要使用 DOMMouseScroll 来绑定滚动事件，
注意该事件需要通过addEventListener()函数来绑定
在火狐中使用event.detail来获取滚动的方向
向上滚 -3 向下滚 3
和event.wheelDelta相反
使用addEventListener()方法绑定响应函数， 取消默认行为时不能使用return false，
需要使用event来取消默认行为event.preventDefault();
但是IE8不支持event.preventDefault();这个玩意，
event.preventDefault && event.preventDefault();
滚轮事件Demo:
元素随鼠标滚轮变长或缩短
// Html:
<body style="height: 2000px;">
<div id="box1"></div>
</body>
// css:
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
// js:
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这个值我们不看大小，只看正负
//wheelDelta这个属性火狐中不支持
//在火狐中使用event.detail来获取滚动的方向
//向上滚 -3 向下滚 3
/*
* 当鼠标滚轮向下滚动时，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;
};
//为火狐绑定滚轮事件
bindEventListener(box1,"DOMMouseScroll",box1.onmousewheel);
};
function bindEventListener(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
键盘事件：
onkeydown
按键被按下
对于onkeydown来说如果一直按着某个按键不松手，
则事件会一直触发
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，
其他的会非常的快这种设计是为了防止误操作的发生。
onkeyup
按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。