[b]加载方式[/b]
为元素加载事件有4种方式:
for a link element e.g. <a id="link" href="xxx"/>
1) DOM Level 0 - Inline model
Drawbacks:
a)js 代码和html代码耦合,不推荐使用。
b) 事件指向handler函数,而不是复制。执行时为获取当前的element时,需要把this作为参数传入handler。
2) DOM Level 0- Traditional model
DrawBacks: 只能加载一个事件函数。
Benefits: 复制了一份doSth加载给Onclick属性,函数运行时this指向element.
3) DOM Level 2 - W3C
第三个参数代表useCapture or not. 设置为true会在捕获阶段执行上级节点事件。false为冒泡阶段。
Benefits:
a) 可加载多个事件函数。
b) 和traditional model一样是复制了一份doSth加载给Onclick属性
4) Microsoft
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]
为元素加载事件有4种方式:
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]