JS base knowledge(三) - 事件

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

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

Drawbacks: js 代码和html代码耦合，不推荐使用。获取当前的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: 可加载多个事件函数。和traditional model一样是复制了一份doSth加载给Onclick属性
4) Microsoft

element.attachEvent('onClick', doSth);

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

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


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

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



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

查看更多 下一篇