DOM之事件
DOM事件，就是浏览器或用户针对页面可以做出的某种动作，我们称这些动作为DOM事件。它是用户和页面交互的核心。当动作发生（事件触发）时，我们可以为其绑定一个或多个事件处理程序（函数），来完成我们想要实现的功能。
总结一下，事件有三个要素：事件源（是谁发生了事情），事件类型（发生了什么事），事件处理程序（怎么应对）。
为了方便理解下面即将要讲解的内容，在正式开始之前，让我们先来了解一个最常用的事件：click，点击事件：当我们用鼠标点击页面时，如果我们为页面绑定了事件处理程序（一般是一个函数），那么这时该程序将被执行。
这里先放一段HTML代码片段供讲解使用：
1 <head> 2 <style> 3 .wrapper{width:400px;height:400px;background-color:red} 4 .main{width:300px;height:300px;background-color:yellow} 5 .content{width:200px;height:200px;background-color:green} 6 </style> 7 </head> 8 <body> 9 <div class="wrapper"> 10 <div class="main"> 11 <div class="content"></div> 12 </div> 13 </div> 14 </body>
一 事件处理程序的绑定和解除
1， 句柄
绑定：element.on+事件类型（type） = function (e){};
同一事件类型只能绑定一个事件处理程序，无兼容性问题。
1 var wrap = document.getElementsByClassName("wrapper")[0]; 2 wrap.onclick = function (){ 3 alert("wrapper"); 4 };//现在点击红色块将会弹出提示框
解除：element.on+type = false/null/’’；
1 wrap.onclick = null; 2 //现在再点击红色块将不会再弹出提示框了
2， 监听
绑定：element.addEventListener(事件类型,fn,boolean)
W3C标准方法，同一事件类型可以绑定一个或多个事件处理程序，IE老版本不兼容
1 wrap.addEventListener("click",test,false); 2 function test() { 3 alert("wrapper"); 4 } 5 //也可以在第二个参数的位置直接使用匿名函数
解除：element.removeEventListener(事件类型,fn,false)
wrap.removeEventListener("click",test,false);
//现在点击将不会再弹出提示框了
另外：IE有个独有的方法，obj.attchEvent(‘on’+type,fn),功能和监听方式一样。解除方式是：element.detachEvent(‘on’+type,fn)
注意，如果绑定的是匿名函数，则无法解除。
二 事件处理模型
1，事件捕获和冒泡
事件的触发其实分为两个阶段，捕获阶段和冒泡阶段。我们既可以把事件处理函数绑定在事件捕获阶段，也可以绑定在冒泡阶段。当某一事件被触发时，先执行捕获再执行冒泡。
事件捕获：当父元素的某类型事件被触发时，所有后代元素上绑定的同类型事件均会被层层触发。
事件冒泡：当子元素的某类型事件被触发时，所有父元素上绑定的同类型事件均会被层层触发。
句柄方式绑定的事件都是在冒泡阶段，监听方式根据提供的第三个参数设置事件捕获或冒泡：true则在捕获阶段，false则在冒泡阶段。
1 var main = document.getElementsByClassName("main")[0]; 2 main.addEventListener("click",function(){ 3 alert("main"); 4 },false);
5 /*现在点击绿色区域会先弹出main，点击确认后再弹出wrapper。如果wrap和main绑定程序的第三个参数都是true，则会先弹出wrapper，后弹出main。
6 如果同一个元素在两个阶段都绑定了同一类型事件，则按照绑定的先后顺序执行*/
2，事件对象
每当有事件被触发，浏览器都会记录当前事件触发的详细信息，并把它们封装成一个对象，可以传递给事件处理函数。IE浏览器有一点不同，它是把该对象存储在window.event里面，而不是直接传递给事件处理函数。
1 main.onclick = function(e){ 2 ev = e || window.event; 3 };
事件对象有许多属性和方法，比如点击事件有反映鼠标坐标的 screenX/screenY、clientX/clientY，键盘事件有检测 Alt、Ctrl 键的 altKey 和 ctrlKey等。 更多属性和方法请在控制台打印查看。
3，阻止事件冒泡
有时候我们并不想让绑定的事件层层向上传递，只想被点击的那个元素执行相关任务，那么我们就需要通过事件对象阻止事件冒泡：
1 main.addEventListener("click",function(e){ 2 alert("main"); 3 e.stopPropagation(); 4 //e.cancelBubble = true;IE的方法 5 },false);
4，阻止事件默认行为
诸如点击submit类型的按钮，页面会提交表单、鼠标右键页面会出现右键菜单、点击a标签会跳转页面等等都是事件的默认行为，是浏览器预定义的处理程序，我们可以通过以下几种方式阻止它们。
return false；句柄方式绑定的事件处理程序才能实现。
e.preventDefault();W3C标准方式。
e.returnValue = false;兼容低版本IE浏览器。
1 document.oncontextmenu = function (e){ 2 e.preventDefault(); 3 alert("现在右键点击不会出现菜单栏了")； 4 };
5，事件委托
事件对象有两个属性：target或srcElement(IE)，它存储的是事件源对象，即实际触发该事件的对象。不是捕获的，也不是冒泡的。通过事件源对象，可以轻松实现事件委托功能。
事件委托的功能是：当子元素个数很多或不确定，且每个子元素都需要绑定执行类似功能的事件处理函数时，通过在父元素上绑定该事件处理函数，在函数内部获取事件源对象（某子元素），通过事件冒泡机制，确保能让每个子元素在被触发相应事件时，事件处理函数都能被正确执行。
1 /* 2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 <li>4</li> 7 <li>5</li> 8 <li>6</li> 9 <li>7</li> 10 。。。 11 </ul> 12 假如现在有这样一个列表，数目很多，而且还会动态更新，我们要实现的功能是点击每个li都弹出它自己的内容 13 */ 14 var ul = document.getElementsByTagName("ul")[0]; 15 ul.onclick = function (e){ 16 var ev = e || window.event; 17 target = ev.target || ev.srcElement; 18 alert(target.innerText); 19 }; 20 //这样就可以很简单的实现这个功能了，即使后面假如了新的li，点击新的li依然可是弹出正确的内容
三 鼠标事件
1， click：点击事件
等同于mousedown+mouseup，不管这两个事件间隔多久，都会触发一次click事件。
2， mousedown：鼠标按下事件
3， mouseup：鼠标弹起事件
4， mouseover/mouseenter：鼠标移入事件
5， mouseout/mouseleave：鼠标移出事件
注意：ES5添加的mouseenter和mouseleave阻止了事件冒泡。
6， mousemove：鼠标移动事件
7， contextmenu：右键出现菜单事件
8， selectstart：选中文字事件
小技巧：通过事件对象的button属性可以判断鼠标左右键，0：左键；1滚轮；2,：右键。另外，click事件只能由左键触发，只有mousedown和mouseup可以触发右键点击事件。
四 键盘事件
1，keydown：按键按下事件
可以检测所有按键，但不会返回字符编码。
2，keypress：按键按下事件
只能响应字符类按键，可以返回字符的编码，charCode属性。
3，keyup：按键弹起事件
五 输入框事件
1， input
每输入一次就会触发一次，即只要输入框的内容有变化都会触发该事件。
2， change
聚焦和失去焦点两个时刻内容不同才触发。
3， focus，获取焦点
当输入框获取焦点时触发
4， blur，失去焦点
当输入框失去焦点时触发
