JS base knowledge(3) - 事件

[b]加载方式[/b]
为元素加载事件有４种方式：
for a link element e.g. <a id="link" href="xxx"/>
1) DOM Level 0 - Inline model

<a... onclick="doSth();"/>

Drawbacks:
a)js 代码和html代码耦合，不推荐使用。
b) 事件指向handler函数，而不是复制。执行时为获取当前的element时，需要把this作为参数传入handler。
2) DOM Level 0- Traditional model

element.onclick=doSth;

DrawBacks: 只能加载一个事件函数。
Benefits: 复制了一份doSth加载给Onclick属性，函数运行时this指向element.
3) DOM Level 2　－　W3C

element.addEventListener('click',doSth,false);

第三个参数代表useCapture or not.　设置为true会在捕获阶段执行上级节点事件。false为冒泡阶段。
Benefits:
a) 可加载多个事件函数。
b) 和traditional model一样是复制了一份doSth加载给Onclick属性
4) Microsoft

element.attachEvent('onClick', doSth);

Drawbacks: onclick属性指向doSth方法，而不是拷贝了一份。[b]导致在运行onclick时，this 指向了window对象（而非当前element)。[/b]

[b]事件传播[/b]
IE中支持冒泡。其他浏览器支持捕获与冒泡两个阶段，通过在addEventListener方法里配置在某个阶段触发上级事件。


[b]设计模式[/b]
事件处理属于Observer pattern
<domElement onclick = "handler()" />
domElement 可以看做是observable(Subject), handler看做是observer.
浏览器

Element(observable)在事件发生时传递消息（事件）给observer(handler).

[img]http://dl.iteye.com/upload/attachment/0071/9693/968bd0cc-0b51-33f3-9da8-0af04fd479d6.png[/img]

参考：
[url]http://www.quirksmode.org/js/introevents.html[/url]
[url]http://www.quirksmode.org/js/this.html[/url]