一篇关于事件的小文章

事件流

        事件流就是从页面接收事件的顺序！！！它可以分为事件冒泡流和事件捕获流。

首先按照字面意思冒泡就是从下到上的意思吧，捕获就是从上到下的意思，上张图

第一张图呢就是冒泡的实现原理图，第二张就不用说了是捕获的，假如说给DIV绑定了一个事件，当你触发的时候会发现它的父元素以及它上面的那些节点全会 触发事件，说的简单一点就是

<div id="list">
	<div id="list1"></div>
	<div id="list2"></div>
	<div id="list3"></div>
</div>

var list1=document,getElementById("list1");
list1.onclick=function ( ){
      console.log("这是list1");
} 
document.body.onclick=function( ){
       console.log("这是body");	
}

当你点击list1的时候会发现控制台上输出了  这是list1和这是body；这就是事件冒泡，如果啊你不想让它冒泡那就可以

list1.onclick=function ( event ){
      console.log("这是list1");
      event.preventDefault(); //非IE
}

list1.onclick=function ( event ){
      console.log("这是list1");
      window.event.returnValue=false; //IE
}

事件冒泡是IE的事件流，还真是惊大呆，别的是捕获，IE总是最特殊的那一个！！！

如何删除事件

        突然想到一个场景就是在向服务器提交数据的过程，假如说网有点卡然后点了提交没反应，又点了一次，是不是最后提交了两次呢？？？我们可以在一个时间段内只能点击一次，当点击完一次的时候取消那个事件，这就牵扯到绑定事件的时候是DOM0级还是DOM2级绑定的，通俗的说就是你用onclick还是addeventListener绑定的！

list1.onclick=null;

DOM0很简单但是DOM2相对来说不是那么简单了，DOM2是用removeEventListener()；但是使用这个方法的时候参数什么都不能变！！！

var hander= function(){
		console.log("这个方法是添加事件和删除事件公用的方法");
	} ;
	list1.addEventListener("click",hander,false);
	list1.removeEventListener("click",hander,false);

如果不共用hander就算直接写成那个函数，也不是同一个函数，也无法删除事件！解释一下这两个函数最后的false是什么意思，false的意思就是表示在冒泡阶段调用事件处理，true正好相反是在捕获阶段。

忘了一件事就是IE的事件绑定，前面是非IE的

var list1=document.getElementById("list1");
	var hander= function(){
		console.log("这个方法是添加事件和删除事件公用的方法");
	} ;
	list1.attachEvent("onclick",hander); //添加事件
	list1.detachEvent("onclick",hander);  //删除事件
	

IE有两个不同点

        1:它可以用attachEvent给一个节点绑定多个事件函数；

        2：它是onclick不是click，最后也没有false或者true，因为IE 只有冒泡流；

前面大概说了一下事件绑定和事件流，接下来说说事件委托；

事件委托

        什么是事件委托字面意思我们理解是把事件委托给别人，它官方点的解释就是利用事件冒泡指定一个事件可以管理某一类型的事件，这个听起来是真的。。。。

        来个例子说明一下，还是前面的那段程序

<div id="list">
	<div id="list1"></div>
	<div id="list2"></div>
	<div id="list3"></div>
</div>

假如我们要给list1，list1，list3绑定事件，按照一贯作风必须得给每个绑定一个事件

	var list1=document.getElementById("list1");
	var list2=document.getElementById("list2");
	var list3=document.getElementById("list3");
	list1.onclick=function(){
			console.log("list1这个方法多捞哦");
		}
	list2.onclick=function(){
			console.log("list2这个方法多捞哦");
		}
	list3.onclick=function(){
			console.log("list3这个方法多捞哦");
		}

是这样的吧，但是事件是要占内存的，它越多性能越差啊，现在可是低碳环保节能的时代啊，就算你的电脑很好这样浪费也不行啊是不！！！所以啊这就来了给事件委托，事件不是会冒泡吗？不是爱往document那走吗？那咋们是不是能把事件直接绑定在DOM树的最上面

var list=document.getElementById("list");
	list.onclick=function(event){
		var event=event || window.event;  //IE和非IE的event对象
		var tar=event.target;  //获取事件的目标对象
		if(tar.id=="list1"){  //目标对象获取ID
			console.log("您和蔼的点击了list1");
		}else if(tar.id=="list12"){
			console.log("您和蔼的点击了list2");
		}else if(tar.id=="list13"){
			console.log("您和蔼的点击了list3");
		}
	}

嗯哼？是不是比前面那种强硬的添加事件舒服多了？？？这就是事件委托！！！

最后再说一下这个事件循环

事件循环

        事件循环吧我觉得挺抽象的，就是那个Event Loop！说这个之前呢，咋们得先了解一下什么是任务队列？

      任务队列：通俗说就是一个等待执行的异步函数的队，为什么不是同步呢？因为人家同步是在主线程上等待执行的，主线程上面也是得排队执行，那个对就是执行栈！！！那什么时候会执行这个任务队列中的函数呢？这就是异步。。。当我们需要执行这个函数的时候让任务队列来通知主线程我们有个异步函数需要执行，这样才能执行。假如执行栈中的任务都执行完了呢？它是不是就闲着？如果任务队列中有剩下的函数它也待不住啊，所以它会执行剩下的异步函数，就这样一直循环就构成了所谓的事件循环！！！