高性能JS事件技术

　　javascript是如何切入到html和css中间，让三者融合呢？最后我发现这个切入点就是javascript的事件系统，不管我们写多长多复杂的javascript代码，最终都是通过事件系统体现在html和css上，因此我就在想既然事件系统是三者融合的切入点，那么一个页面里，特别是当今越来越复杂的网页里必然会有大量事件操作，没有这些事件我们精心编写的javascript代码只有刀枪入库，英雄无用武之地了。
事件系统是javascript和html以及css融合的切入点，这个切人点好比java里的main函数，一切神奇都是由这里开始，那么浏览器是如何完成这种切入呢？我研究下来一共有3种方式，它们分别是：

• html事件处理: 将事件函数直接写在html标签里，因为这种写法和html标签紧耦合，所以称为html事件处理。
• DOM0级事件处理:是当今所有浏览器都支持的事件处理，不存在任何兼容性问题DOM0事件处理的规则是：每个DOM元素都有自己的事件处理属性，该属性可以赋值一个函数。DOM0级事件处理的事件属性都是采用“on+事件名称”的方式定义，整个属性都是小写字母。我们知道DOM元素在javascript代码里就是一个javascript对象，因此从javascript对象角度理解DOM0级事件处理就非常容易。
  
  var btnDOM = document.getElementById("btn");
  btnDOM.onclick = function(){//设置事件

     alert("fun1!");            

  }
  btnDOM.onclick = function(){//设置事件，后面覆盖前面

     alert("fun2!");            

  }
  btnDOM.onclick = null；//取消事件
  
• DOM2事件处理：是标准化的事件处理方案。
  1. 事件流：页面接收事件的顺序。
  2. 事件冒泡和事件捕获。
     事件冒泡是微软公司提出解决事件流问题的方案，而事件捕获则是网景公司提出的事件流解决方案，它们的原理如下图：
     
     在ie下通过DOM元素的attachEvent方法添加事件，和DOM0事件处理相比，添加事件的方式由属性变成了方法，所以我们添加事件就需要往方法里传递参数，attachEvent方法接收两个参数，第一个参数是事件类型，事件类型的命名和DOM0事件处理里的事件命名一样，第二个参数是事件函数。我们可以为DOM元素添加多个不同的点击事件。ie为删除事件提供了detachEvent方法，参数列表和attachEvent一样，如果我们要删除某个点击事件，只要传递和添加事件一样的参数即可，注意在javascript的匿名函数里，两个匿名函数哪怕代码完全一样，javascript都会在内部使用不同变量存储，故此次要给操作函数独立的定义而不能误用匿名函数。
     DOM2事件处理，它的原理如下图所示：
     
     DOM2事件处理里添加事件使用的是addEventListener，它接收三个参数比ie事件处理多一个，前两个的意思和ie事件处理方法的两个参数一样，唯一的区别就是第一个参数里要去掉on这个前缀，第三个参数是个布尔值，如果它的取值是true，那么事件就按照捕获方式处理，取值为false，事件就是按照冒泡处理，有第三个参数我们可以理解为什么DOM2事件处理里要把事件元素跑个两遍，目的就是为了兼容两种事件模型
     DOM2也提供了删除事件的函数，这个函数就是removeEventListener。
     　使用和ie事件的一样即参数要和定义事件的参数一致，不过removeEventListener使用时候，第三个参数不传，默认是删除冒泡事件，因为第三个参数不传默认都是false。
     DOM2事件处理在ie9包括ie9以上的版本都得到了很好的支持，ie8以下是不支持DOM2事件的。
     参考：关于编写性能高效的javascript事件的技术

第47周六