原生Javascript之事件
事件
就是和浏览器产生交互效果的，事件触发和函数一起使用，当触发事件的时候，调用相应的事件去处理接下来的事情。
DOM0级事件
直接在
dom对象上注册事件名称，所有浏览器都支持。
document.getElementById('div1').onclick=function(e){ // 触发事件之后的操作}事件触发会默认传入一个参数e：事件对象；通过这个事件对象，可以获取到触发这个事件的dom元素，点击的坐标值，等一些主要的信息。当然事件的触发也可以这样写：
document.getElementById('div1')['onclick']=function(e){// 触发事件后的操作}这上面的两种事件的触发，其实也就是js对象身上属性的两种访问方式，也就是说：
- DOM0级事件是元素对象的私有属性；
- 同一个元素对象，同一个事件行为，只能绑定一次，多次绑定，后面的会覆盖前面的；
- DOM0级事件发生在事件流的冒泡阶段
DOM0级事件中的this
一般下面这种写法的时候，当事件触发的时候，事件中的this就是指向触发该事件的dom元素对象
<script>
var oDiv=document.getElementById('div1');
oDiv.onclick=function(e){
// 触发事件之后的操作
alert(this.id); // div1
}
// 要想解除div身上的点击事件，直接在后面注册点击事件并且设置为null
oDiv.onclick=null;
script>当把事件写在html代码里面的时候，虽然也遵守事件覆盖的原则，但不会传入event事件对象，相当于动态调用函数，this指向的是window，而不是事件触发者：dom元素：
<div id='div1' class='div1' onclick='exec();'>div>DOM2级事件
支持元素绑定多个事件
addEventListener()
- 注册事件
this指向被绑定事件的这个元素- 三个参数：事件行为（去掉前边的on），处理函数回调（默认传入event对象，this指向触发的元素节点），捕获/冒泡（true/false）
- 给同一个元素，同一个行为绑定多次同一个方法，实际上只执行一次
- 对应同一个元素来说，是按照事件绑定的先后顺序执行的
var btn=document.getElementById('div');
btn.addEventListener('click',function(e){
console.log(this); // btn
},false)removeEventListener()
- 移除事件
IE8及其以下版本浏览器，
attachEvent()
- 对于同一个元素，绑定多个事件，事件执行的顺序不是按照绑定的顺序执行
- 事件中的
this默认指向window - 给同一个元素，同一个行为绑定多次同一个方法，执行是多次的
detachEvent()
阻止冒泡
e.stopPropagation()标准浏览器e.cancelBubble=true低级IE浏览器- 兼容性写法
通过e.stopPropagation来判断是标准浏览器还是低级IE浏览器 e.stopPropagation? e.stopPropagation(): e.cancelBubble=true;阻止默认事件
e.preventDefault标准浏览器e.returnValue=false低级IE浏览器
通过e.preventDefault来判断是标准浏览器还是低级IE浏览器
e.preventDefault?e.preventDefault():e.returnValue=false;事件流
定义
文档对象模型DOM的结构是一个树状，当一个元素产生一个事件时，该事件会在元素节点与跟节点按特定的顺序传播，路径所经过的节点都会收到该事件，这个过程称为事件流
类型
- 事件捕获
- 从上往下
- 由最顶层的元素到下面最精确的元素（事件产生的元素）
- 事件冒泡
- 从下往上
- 事件从子节点（事件产生的元素）一直向上传递到根节点
- 事件发生的元素传递到与元素有确定从属关系的其他元素上面，直到传递找不到确定的元素上面结束
- 冒泡的好处：事件委托
DOM标准同时支持上述两种事件类型，但是捕获事件先发生。两种事件流都会触发DOM中的所有对象，在document对象开始，也在其中结束。但也有标准的浏览器会将事件延续到window对象。
- 捕获事件要比冒泡事件先触发
'div1'>
'div2'>
var btn=document.getElementById('div1');
// 冒泡
btn.addEventListener('click',function(e){
console.log('冒泡')
},false);
// 捕获事件
btn.addEventListener('click',function(e){
console.log('捕获')
},true);当我们点击里面的div的时候，是先打印捕获，在打印冒泡；但是当我们先点击外面的div的时候，是先打印的冒泡，在打印的是捕获；为什么?
根据事件流触发的顺序图，可以知道，当我们点击里面的div的时候，根据下面的事件流传递的过程原理知道，是先发生捕获事件在发生冒泡事件；当点击的是外面的div，并且事件绑定在点击元素上面，其触发的顺序是按照绑定的顺序触发的
外层div和内层div同时注册了捕获事件，那么点击内层div时，外层div的事件一定是先触发的；外层div和内层div都是注册的冒泡事件，点击内层div时，一定是内层div事件先执行，原理相同。
首先是捕获事件传递，接着是冒泡事件传递；要是一个事件处理函数同时注册了捕获和冒泡事件，则会在dom事件模型中调用两次。标准的DOM事件模型（特有）：文本节点也会触发事件，但是IE不会
事件流传递过程
如果为一个超链接添加了click事件监听器，那么当该链接被点击时该事件监听器就会被执行。但如果把该事件监听器指派给了包含该链接的p元素或者位于DOM树顶端的document节点，那么点击该链接也同样会触发该事件监听器。这是因为事件不仅仅对触发的目标元素产生影响，它们还会对沿着DOM结构的所有元素产生影响。
W3C事件模型中明确地指出了事件流转送的原理。可以分为3个阶段。
- 事件捕捉（Capturing）阶段
- 事件将沿着DOM树向下转送，目标节点的每一个祖先节点，直至目标节点。
- 例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。
- 在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。
- 实际事件发生的目标元素在捕获阶段是不会接收事件的。
- `目标（target）阶段
- 浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器。目标节点就是触发事件的DOM节点。
- 例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。
- 事件发生的目标元素发生事件并且处理事件。
- 冒泡（Bubbling）阶段
- 事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。
- 该过程中的每一步，浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行它们。
并非所有的事件都会经过冒泡阶段的，所有的事件都要经过捕捉阶段和目标阶段，但是有些事件会跳过冒泡阶段。例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。
事件冒泡（代理\委托）
利用到事件的冒泡和目标元素，把事件处理器添加到父元素上，等待子元素事件冒泡，并且父元素能够通过
target(IE为srcElement)，事件源，来判断是哪一个子元素，从而进行处理
<body>
<ul id="color-list">
<li>redli>
<li>orangeli>
<li>yellowli>
<li>greenli>
<li>blueli>
<li>indigoli>
<li>purpleli>
ul>
<script>
(function(){
var colorList=document.getElementById("color-list");
colorList.addEventListener('click',showColor,false);
function showColor(e)
{
e=e||window.event;
// 获取事件目标元素
var targetElement=e.target||e.srcElement;
if(targetElement.nodeName.toLowerCase()==="li"){
alert(targetElement.innerHTML);
}
}
})();
script>
body>好处
- 将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
- DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。