一、事件绑定的几种方式：
1.1 ele.on+“事件名“：如div.onclick = function(event){ };
1.1.1这种方式兼容性非常好，但一个元素的同一个事件上只能绑定一个处理程序。
1.1.2基本等同于写在html行间上。
1.2 obj.addEventListener(type,fn,false);
1.2.1 IE9以下不兼容，可以为一个事件绑定多个处理程序。
1.3 obj.attachEvent('on'+type,fn);
1.3.1 IE独有，一个事件同样可以绑定多个处理程序。
二、事件处理程序的运行环境
2.1 ele.on+“事件名“,如div.onclick = function(event){ };
程序this指向dom元素本身。
2.2 obj.addEventListener(type,fn,false);
程序this指向dom元素本身。
1.3 obj.attachEvent('on'+type,fn);
程序this指向window。
1.4 兼容性处理方法
function addEvent(elem,type,handle){
if(elem.addEventListener){
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){
elem.attachEvent('on'+type,function(){
handle.call(elem);
})
}else{
elem['on+type'] = handle;
}
}
三、解除事件处理程序
1、ele.onclick = false/''/null;
2、ele.removeEVentListener(type,fn,false);
3、ele.detachEvent('on'+type,fn);
注：若绑定匿名函数则无法解除。
例如：如若是匿名函数，则把它写在外面，如给他一个函数名test。
//先绑定
var div = document.getElementByTagName('div')[0];
div.addEventListener('click',test,false);
function test(){
console.log('a');
}
//再解除
div.removeEventListener('click',test,false);
四、事件处理流程
4.1 js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。我们平常用的
addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执
行的函数，然而，addEventListener还可以传入第三个参数，第三个参数默认值是false，表示在事件冒
泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
4.1.1 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触
发捕获事件，直到达到目标节点。
事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，
自父元素冒泡向子元素（事件源元素）。（自顶向下）IE没有事件捕获事件。
4.1.2 目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指
定给目标事件的监听器后，就会运行该监听器。
4.1.3 事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡
机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此
类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。
事件冒泡：结构上（非视觉上4）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，
自子元素冒泡向父元素。（自底向上）
focus、blur、change、submit、reset、select等事件不冒泡。
4.2 取消冒泡和阻止默认事件
4.2.1取消冒泡：可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在
同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何
其他对象上的事件处理程序将不会被调用。
w3c标准enent.stopPropagation();但不支持IE9以下的版本。
IE独有event.cancelBubble = true;
封装取消冒泡的函数stopBubble(event)
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
4.2.2 阻止浏览器的默认行为
事件默认行为：浏览器自己默认做的事情
哪些默认行为要做阻止
4.2.2.1 a标签链接跳转
4.2.2.2 Submit按钮的提交，
4.2.2.3 右键菜单，
4.2.2.4文本框的输入
阻止默认行为的方式
event.preventDefault();W3C标准，IE9以下不兼容。
event.returnValue = false; 兼容IE。
return false;以对象属性的方式注册的事件才生效。
自定义右键菜单 oncontextmenu
文本框只能输入数字
4.2.2.5封装一个阻止默认事件的函数
function cancelHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
五、事件源对象
5.1 event.target 火狐只有这个
event.srcElement IE只有这个
这两个chrome 都有
5.2事件源对象兼容性写法（作用事件委托）
例1
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
//要求点那个li就打印出那个li的内容，哪怕是成千上万也行
var ul = document.getElementsByTagName('li');
var len =li.length;
for(var i=0;i<len;i++){
li[i].onclick = function(){
console.log(this.innerText);
}
}
//这样也行但但成千上亿的li就不行了
</script>
</body>
例2
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
//要求点那个li就打印出那个li的内容，哪怕是成千上万也行
var ul = document.getElementsByTagName('li'
ul.onclick = function(e){//事件冒泡和事件源对象，这样处理就是事件委托机制
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
//这样即或是成千上亿的li也行了
</script>
</body>
六、事件分类
6.1鼠标事件：
6.1.1 click、mousedown、mousemove、mouseup、contextmenu、mouseover、
mouseout、mouseenter、mouseleave
6.1.2 用button来区分鼠标的按键
6.1.3 DOM3标准规定：clik只能监听左键，只能通过mousedown和mouseup来判断鼠标键
6.1.4解决clik与mousedown的冲突
