当前位置: 代码迷 >> JavaScript >> JS base knowledge(三) - 事件
  详细解决方案

JS base knowledge(三) - 事件

热度:189   发布时间:2012-11-23 22:54:33.0
JS base knowledge(3) - 事件
加载方式
为元素加载事件有4种方式:
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
  相关解决方案