Pro JavaScript (8)

January 11, 2006 at 5:24 pm | Posted in JavaScript | Leave a comment

Pro JavaScript (8) 事件(Events)

背景:Event至少需要DOM2的支持(DOM1不支持事件,DOM3将全面支持事件)。事件模型最早由IE4.0支持,由于那时没有标准,所以IE的事件模型是基于propriety的,后来在一体化的驱动下,DOM标准诞生,但是由于历史原因,Mozilla系列是最接近DOM标准的,相应OperaSafari也趋向于DOM标准,而IE则对于DOM标准的事件模型支持的不好。

事件流的区别IE vs. DOM
IE
使用起泡法,即事件由触发点逐层向上传递。

NS使用捕捉法,即事件从根节点(document)逐层向下传递。

DOM同时支持两种方法,但先捕捉后起泡。

注意DOMText也会触发事件。

事件处理

事件的种类最常用的有click,load,mouseover

简单事件调用:方法是置property值法,例如,针对click事件,可以直接对节点的onclick属性置值,来把该节点的click事件通过event handler onclick与某个Event Handler function进行关联:

高级事件调用:置值法的缺点是无法解决如果针对该event handler需要关联多个function的情况。

IE

[Object].attachEvent(“name_of_event_handler”, fnHandler);
[Object].detachEvent(“name_of_event_handler”, fnHandler);

DOM

[Object].addEventListener(“name_of_event”, fnHandler, bCapture);
[Object].removeEventListener(“name_of_event”, fnHandler, bCapture);

注意:element对象的方法,第一个参数是event名,也就是说click,而不是onclick,另外,第3个参数指是否使用捕捉法

,置为false则使用起泡法,这里需要特别注意的是,如果你addremove时候,第3个参数必须一致,否则,虽然不报错,但实际上不会被remove

关于事件对象

事件对象封装了程序员可能需要的事件信息,例如:是那个对象引起了该事件,事件触发时鼠标/键盘的状态等。IEDOM的使用方法是不同的。

对于IE来说,事件对象就是window对象的event属性,但该属性只有在事件触发时,才可用,当所有event hander都被执行完后,window.event会自动被置为null。这点可以直接观察window.event的字面值来证明,在IE中是个Null,而在Mozilla系列中是个Undefined

DOM规范中规定,事件对象是event listener的唯一参数

当获得event对象后,就可以取用其中的属性和方法,IEDOM的属性很相似,但有不同之处,需要特别注意的是:

  • 获得target的方法(target指激发事件的那个对象,如div
    IE
    oEvent.srcElement
    DOM
    oEvent.target

  • 阻止默认行为 (有用的功能,例如阻止用户对某对象的鼠标右键事件)
    IE
    oEvent.returnValue=false
    Mozilla
    oEvent.preventDefault()

  • 阻止event起泡
    IE
    oEvent.cancelBubble=true
    Mozilla
    oEvent.stopPropagation()

事件的类型

  • 鼠标事件:
    click,dblclick,mousedown,mouseout,mouseover,mouseup,mousemove

  • 键盘事件:
    keydown,keypress,keyup

  • HTML事件:
    load,unload,abort,error,select,change,submit,reset,resize,scroll,focus,blur(lost focus)
    注:unload指离开该页面或关闭窗口
    浮动标签的特效就是利用scroll事件并把该标签的style.top置为document.body.scrollTop

  • DOM 事件:
    反映DOM结构变化的情况,属于DOM标准,目前还未被主流浏览器实现
    DOMSubtreeModified,DOMNodeInserted,DOMNodeRemoved,DOMNodeRemovedFromDocument,DOMNodeInsertedIntoDocument

提供统一的工具方法来整合不同浏览器

由于IEDOM的事件模型不同,为了能使得代码能满足跨浏览器的要求,所以最好有一个工具类来提供统一的事件add/remove等方法。

Advertisements

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: