标签：
js和html之间交互通过事件实现，通过使用偵听器来预定事件，以便事件发生时执行相应代码，这种为观察员模式。
事件流描述的是从页面中接受事件的顺序，又外向内为事件捕获流，由内向外为事件冒泡流，其中ie不支持事件捕获流，而且在低版本ie中冒泡流会跳过html
dom2级事件规定的事件流包括三个阶段：事件捕获（由document->body),处于目标阶段，事件冒泡阶段。
事件处理程序有几种方式，最起初的是在html中，为html事件处理程序，需要注意的是在js值不能使用未经转义的html语法字符，比如<>""&等等，在方法函数内部，this等于事件的目标元素，另比较巧妙的方法是通过with去扩展作用域。但是其有一些缺点：1.时差问题，用户在页面上执行动作，不过可能触发了的函数还不具备完整执行的条件，2.扩展事件作用域在不同浏览器会有不同的结果，3.html和js代码紧密耦合。
后来出现了dom0级事件处理程序，其中程序中的this引用当前元素，使用方法为node.onclick＝function()，解除方法为node.onclick=null;
又出现了dom2级事件，addeventlistener/attachevent/node[‘on‘+event_name](为了兼容不同浏览器），解除也一样，对于addeventlitstener，第三个参数默认为false，指冒泡流，如为true则为捕获流。触发一个事件，就会产生一个事件对象。
对于dom中的事件对象而言，需要注意的便是currenttarget,this,target，其中前俩始终是相等的，均为指定的目标元素，而target指向的为事件的实际目标，为了减少dom的请求次数，为了更高的效率，我们也可以利用event的type属性去通过一个函数处理多个事件，在dom中，要阻止特定事件的默认行为，可以使用preventdefault方法，阻止事件在dom层次中的传播，可以使用stoppropagation方法。还可以通过eventphase属性获得事件进行到三个阶段中的哪一个阶段。
对于ie中的事件对象，在dom0级中，event对象作为window对象的一个属性，我们需要单独申明var event=window.event，在dom2级中，会有一个event作为参数传入事件处理程序中，因为事件处理程序的作用域是根据指定它的方式来确定的，所以this不会一直等于事件目标，所以还是使用event的src_element较好，同样，如果要阻止特定事件的默认行为，我们可以利用event.returnvalue＝false,阻止冒泡呢，我们利用event.cancelbubble=true(这两者默认值是反着的。
事件类型有很多类，我只选取了一部分，1.ui事件不一定与用户操作有关，但在dom规范中保留为了向后保留，load事件，在window上实现了这件事件，确保向后兼容，而对于图像load中，只要设置了src属性就会开始下载，不一定得等添加到文档后才开始下载，其他就必须两样都得完成，所以出了图像外，顺序（设置src和添加到文档)就不那么重要了。unload事件上指被完全卸载后触发，需要注意的是那些在load后存在的对象在unload时已经不在了。resize要避免大量的代码，因为有的浏览器是根据1px来衡量的，所以可以可能会产生大量的重复代码。scroll事件，除了safari(body）之外，其他的均通过html来反映，这里需要做跨浏览器的处理（document.documentelement.scrolltop||document.body.scrolltop)，同样要避免重复的代码.
在鼠标事件中，需要明确clientx（视口中的坐标）,pagex（页面本身的坐标）,screenx（屏幕的坐标），其中pagex＝clientx+scrollleft;在没有滚动的情况下这俩值是相等的。
html5事件，contextmenu事件用以表示显示上下文菜单。domcontentloaded事件在形成完整的dom树之后就会触发。readstatechange事件中，并非所有对象都会经历readystate的所有阶段。pageshow/hide事件，页面显示时触发，在load事件过后。
优化，进行事件委托，在dom树中尽量最高层次上添加一个事件处理程序
标签：
原文地址：http://www.cnblogs.com/redstarbury/p/5690153.html
