Question

javascript是如何切入到html和css中间，让三者融合呢？最后我发现这个切入点就是javascript的事件系统，不管我们写多长多复杂的javascript代码，最终都是通过事件系统体现在html和css上，因此我就在想既然事件系统是三者融合的切入点，那么一个页面里，特别是当今越来越复杂的网页里必然会有大量事件操作，没有这些事件我们精心编写的javascript代码只有刀枪入库，英雄无用武之地了。

HTML事件处理

html事件处理就是将事件函数直接写在html标签里，因为这种写法和html标签紧耦合，所以称为html事件处理。例如下面代码：

<input type="button" id="btn" name="btn" onclick="alert('Click Me!')"/>

or

<input type="button" id="btn" name="btn" onclick="btnClk()"/>

function btnClk(){

         alert("click me!");   

}

上面这个写法是一种很美的写法，所以时下还是很多人会不自觉的使用它，但是也许很多人不知道，后一种写法其实没有前一种写法健壮，这个也是我前不久在研究非阻塞加载脚本技术时候碰到的问题，因为根据前端优化的原则，javascript代码往往是位于页面的底部，当页面有被脚本阻塞时候，html标签里引用的函数可能还没执行到，这个时候我们点击页面按钮，结果会报出“XXX函数未定义的错误”，在javascript里这样的错误是会被try，catch所捕获，因此为了让代码更加健壮，我们会有如下的改写：

<input type="button" id="btn" name="btn" onclick="try{btnClk();}catch(e){}"/>

但是这是一种极其不推荐的做法！耦合性太强！

DOM0级事件处理

DOM0级事件处理是当今所有浏览器都支持的事件处理，不存在任何兼容性问题，看到这样一句话都会让每个做web前端的人们激动不已。DOM0事件处理的规则是：每个DOM元素都有自己的事件处理属性，该属性可以赋值一个函数，例如下面的代码：

var btnDOM = document.getElementById("btn");

btnDOM.onclick = function(){

         alert("click me!");            

}

DOM0级事件处理的事件属性都是采用“on+事件名称”的方式定义，整个属性都是小写字母。这个事件处理的方式只能绑定一个函数，多个函数的话，后面一个函数会将之前的函数覆盖。

DOM2事件处理和IE事件处理

DOM2事件处理是标准化的事件处理方案，但是IE浏览器自己搞了一套，功能和DOM2事件处理相似，但是代码写起来就不太一样了。DOM2事件处理在ie9包括ie9以上的版本都得到了很好的支持，ie8以下是不支持DOM2事件的。旧版本的IE使用的是自己封装的一套attachEvent,标准的是使用addEventListener。

事件流

在页面开发里我们常常会碰到这样的情况，一个页面的工作区间在javascript可以用document表示，页面里有个div，div等于是覆盖在document元素上，div里面有个button元素，button元素是覆盖在div上，也等于覆盖着document上，所以问题来了，当我们点击这个按钮时候，这个点击行为其实不仅仅发生在button之上，div和document都被作用了点击操作，按逻辑这三个元素都是可以促发点击事件的，而事件流正是描述上述场景的概念，事件流的意思是：从页面接收事件的顺序。

事件冒泡和事件捕获

• 事件冒泡: 是微软公司提出解决事件流问题的方案
• 事件捕获: 是网景公司提出的事件流解决方案

冒泡事件由div开始，其次是body，最后是document，事件捕获则是倒过来的先是document，其次是body，最后是目标元素div，相比之下，微软公司的方案更加人性化符合人们的操作习惯，网景的方案就很别扭了，这是浏览器大战的恶果。

attachEvent

微软为自己的事件方式选择了一套做法：attachEvent,在ie下通过DOM元素的attachEvent方法添加事件，和DOM0事件处理相比，添加事件的方式由属性变成了方法，所以我们添加事件就需要往方法里传递参数，attachEvent方法接收两个参数，第一个参数是事件类型，事件类型的命名和DOM0事件处理里的事件命名一样，第二个参数是事件函数了，使用方法的好处就是如果我们在为同一个元素添加个点击事件。

但是需要注意的是删除事件的时候，如果绑定传入的是匿名函数，是无法被清除干净的。因此写事件要有个良好的习惯即操作函数要独立定义，不要用匿名函数用成了习惯。

addEventListener

DOM2是标准化的事件，使用DOM2事件，事件传递首先从捕获方式开始即从document开始，再到body，div是一个中介点，事件到了中介点时候事件就处于目标阶段，事件进入目标阶段后事件就开始冒泡处理方式，最后事件在document上结束。（捕获事件的起点以及冒泡事件的终点，我本文都是指向document，实际情况是有些浏览器会从window开始捕获，window结束冒泡，不过我觉得开发时候不管浏览器本身怎么设定，我们关注document更具开发意义，所以我这里一律都是使用document）。人们习惯把目标阶段归为冒泡的一部分，这主要是因为开发里冒泡事件使用的更加广泛。

DOM2事件处理里添加事件使用的是addEventListener，它接收三个参数比ie事件处理多一个，前两个的意思和ie事件处理方法的两个参数一样，唯一的区别就是第一个参数里要去掉on这个前缀，第三个参数是个布尔值，默认为false。如果它的取值是true，那么事件就按照捕获方式处理，取值为false，事件就是按照冒泡处理，有第三个参数我们可以理解为什么DOM2事件处理里要把事件元素跑个两遍，目的就是为了兼容两种事件模型，不过这里要请注意下，不管我们选择是捕获还是冒泡，两遍遍历是永远进行，如果我们选择一种事件处理方式，那么另外一个事件处理流程里就不会促发任何事件处理函数，这和汽车挂空挡空转的道理一样。通过DOM2事件方法的设计，我们知道DOM2事件在运行时候只能执行两种事件处理方式中的一种，不可能两个事件流体系同时促发，所以虽然元素遍历两遍，但是事件函数绝不可能被促发两遍。

三种方式的比较

HTML事件处理是绝对不推荐的方式，DOM0事件一个DOM元素某个事件有且只有一次，DOM2事件可以让DOM元素某个事件拥有多个事件处理函数，且能让我们精确控制事件流的方式。

性能优化

两个着力点来思考事件系统的性能问题，它们分别是：

• 减少遍历次数
• 内存消耗

遍历次数

不管是捕获事件流还是冒泡事件流，都会遍历元素，而是都是从最上层的window或document开始的遍历，假如页面DOM元素父子关系很深，那么遍历的元素越多，像DOM2事件处理这种，遍历危害程度就越大了，如何解决这个事件流遍历问题了？我的回答是没有，这里有些朋友也许会有疑问，怎么会没有了？事件系统里有个事件对象即event，这个对象有阻止冒泡或捕获事件的方法，我怎么说没有呢？这位朋友的疑问很有道理，但是如果我们要使用该方法减少遍历，那么我们代码就要处理父子元素的关系，爷孙元素关系，如果页面元素嵌套很多，这就是没法完成的任务，所以我的回答是没法改变遍历的问题，只能去适应它。

内存消耗

在javascript里，每个函数都是一个对象，每个对象都会耗费内存。在当今ajax流行，单页面开发疯狂普及的时代，一个网页上的事件都是超级多的，这就意味我们每个事件都有一个事件函数，但是我们每次操作都只会促发一个事件，此时其他事件都是躺着睡觉，起不到任何作用同时还要消耗计算机的内存。

在讲述DOM2事件处理里我提到了目标对象这个概念，抛开DOM2事件处理方式，在捕获事件处理和冒泡事件处理里也有目标对象的概念，目标对象就是事件具体操作的DOM元素，例如点击按钮操作里按钮就是目标对象，不管哪个事件处理方式，事件函数都会包含一个event对象，event对象有个属性target，target是永远指向目标对象的，event对象还有个属性就是currentTarget，currentTarget指向的是捕获或冒泡事件流动到的DOM元素。

假如我们在document上添加点击事件，页面上的按钮不添加点击事件，这时候我们点击按钮，我们知道document上的点击事件会促发，这里有个细节就是促发document点击事件时候，event的target的指向是button而不是document。

事件委托

使用事件委托时可以避免问题的发生，例如将事件绑定在document，document代表整个页面，所以它加载完毕的时间可谓最早，所以在document上实现事件委托，就很难发生事件无效的情况，也很难发生浏览器报出“XXX函数未定义”的问题了。总结一下这个特点：事件委托代码可以运行在页面加载的任何阶段，这点对提升网页性能还是增强网页效果上都会给开发人员提供更大自由度。

参考资料

• 关于编写性能高效的javascript事件的技术