js的事件监听一般有两种写法
方法一：
element.addEventListener(type, listener[, useCapture]); // IE6~8不支持 element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持（垃圾IE专属）
方法二：
element[’on’ + type] = function(){} // 所有浏览器
这两种方法的区别是除了兼容性还有：
使用addEventListener时
<div id="father"></div>
document.getElementById('father').addEventListener('click',function(){
alert('爸爸1');
},false);
document.getElementById('father').addEventListener('click',function(){
alert('爸爸2');
},false);
结果：都能执行，先弹出爸爸1之后是爸爸2
（对于attachEvent结果类似但是顺序有点不同可以参考《addEventListener 的用法示例介绍》）
----------------------------------------
使用on+type方法时：
element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }
结果：只能执行最后一个事件
谈谈事件的捕获和冒泡
红色：捕获事件
深蓝：目标事件
绿色：冒泡事件
- 捕获 阶段：在事件对象到达事件目标之前，事件对象必须从window经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
- 目标 阶段：事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标，该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
- 冒泡 阶段： 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。
如果以上文字抽象，就用例子来说明：
<div id="father" style="height: 100px;width: 100px;background: red; position: absolute; left: 100px;top: 100px;">
<div id="son" style="height: 50px;width: 50px;background: yellow;">
<div id="son2" style="height: 40px;width: 40px;background:pink;"></div>
</div>
</div>
<script>
document.getElementById('father').addEventListener('click',function(){
alert('爸爸1');
},false);
document.getElementById('son').addEventListener('click',function(Event){
alert('儿子');
},false);
document.getElementById('son2').addEventListener('click',function(Event){
alert('儿子2');
},false);
</script>
在三个div层监听了click事件当点击了粉红色区域时也就是点击了son2的同时，也就相当于点击了father和son，就会发生以下事情：
捕获：要找到点击的目标事件前，要从html标签在到body标签以此往下找直到找到目标为止，
在这过程中经过的DOM不会触发事件它们自己绑定的事件，这过程就叫捕获阶段。
目标：也就是用户想要触发事件DOM的元素，这时候目标事件就会第一个先触发了。
冒泡：从目标元素开始在经过其他DOM元素直到body标签在到html标签，跟捕获相反的方向叫冒泡，
在这过程中，从最接近目标元素开始一一执行自己绑定的事件，这过程就叫冒泡阶段。
结果：先弹出儿子2 在到 儿子 最后爸爸1
阻止所有默认行为以及冒泡（不了解默认行为可以参考《html中默认行为有哪些》）
<script>
document.getElementById('father').addEventListener('click',function(){
alert('爸爸1');
},false);
document.getElementById('son').addEventListener('click',function(Event){
//Event.stopPropagation(); //阻止所有默认行为，冒泡从这里开始停止
// Event.bubbles(false); //跳过此冒泡，冒泡不经过这里，继续往上冒泡，不兼容IE
alert('儿子');
},false);
document.getElementById('son2').addEventListener('click',function(Event){
alert('儿子2');
},false);
</script>
在一个事件完成了所有阶段的传播路径后，它的Event.currentTarget会被设置为null并且Event.eventPhase会被设为0。Event的所有其他属性都不会改变（包括指向事件目标的Event.target属性）
（currentTarget 获取监听元素的DOM，绑定谁就获取谁的DOM $(‘.move’).click ..得到的是.move的DOM（专一）
alert(e.currentTarget)=alert(this)）