开发ASP.NET AJAX客户端定制行为

来源：作者：IT168 朱先忠出处：巧巧读书 2008-02-06 进入讨论组

三、创建定制行为组件—MyHoverBehavior
根据我们以前的讲解，我们现在的任务就是使用JavaScript代码把客户端逻辑封装到一个定制行为中。下面，让我们作详细剖析。

为了更好地理解MS AJAX倡导及推出的面向对象JavaScript技术，在本部分我们故意模拟了MS AJAX脚本库的表达形式，即以独立的函数方式而不是以内联方式定义所有的属性存取器函数，方法及事件等。

(一) Prototype定义

首先，象往常一样，在定义完命名空间和类构造器之后，我们要在prototype块中声明私有属性，声明这些属性相关的get及set存取器函数，要重载的父类的方法initialize和dispose，以及所有相关的事件处理器。见如下代码：

清单1—定制行为的prototype块代码

ZXZSamples.MyHoverBehavior.prototype = { 
_hoverElement : null, 
_unhoverDelay : 0, 
_hoverCount : 0, 
_hoverHandler : null, 
_unHoverHandler : null, 
get_hoverElement: ZXZSamples$MyHoverBehavior$get_hoverElement, 
set_hoverElement: ZXZSamples$MyHoverBehavior$set_hoverElement, 
get_unhoverDelay: ZXZSamples$MyHoverBehavior$get_unhoverDelay, 
set_unhoverDelay: ZXZSamples$MyHoverBehavior$set_unhoverDelay, 
initialize: ZXZSamples$MyHoverBehavior$initialize, 
dispose: ZXZSamples$MyHoverBehavior$dispose, 
add_hover: ZXZSamples$MyHoverBehavior$add_hover, 
remove_hover: ZXZSamples$MyHoverBehavior$remove_hover, 
_onhover: ZXZSamples$MyHoverBehavior$_onhover, 
add_unhover: ZXZSamples$MyHoverBehavior$add_unhover, 
remove_unhover: ZXZSamples$MyHoverBehavior$remove_unhover, 
_onunhover: ZXZSamples$MyHoverBehavior$_onunhover, 
_delayedUnhoverHandler:ZXZSamples$MyHoverBehavior$_delayedUnhoverHandler 
}

    这里，我们定义了字段_hoverElement以指定此行为将被绑定到的DOM元素，字段_unhoverDelay用于指定鼠标悬浮于目标上的最大时限（也就是说经_unhoverDelay秒后目标的样式将发生相应改变），字段_hoverCount则用于记忆鼠标移动到目标上的次数。另外两个处理器字段—_hoverHandler和_unHoverHandler用来描述事件代理。这两个代理将由定制行为使用，用以把mouseover/focus和mouseout/blur事件数据关联到两个相应的事件处理器—_onhover和_onunhover上。

(二) 初始化和事件处理

    现在，让我们来讨论一下方法initialize。列表2给出了相应的代码实现。

    清单2—initialize方法

function ZXZSamples$MyHoverBehavior$initialize() { 
ZXZSamples.MyHoverBehavior.callBaseMethod(this, 'initialize'); 
this._hoverHandler = Function.createDelegate(this, this._onhover); 
this._unHoverHandler = Function.createDelegate(this, this._unhoverDelay? this._delayedUnhoverHandler :this._onunhover); 
$addHandler(this.get_element(), "mouseover", this._hoverHandler); 
$addHandler(this.get_element(), "focus", this._hoverHandler); 
$addHandler(this.get_element(), "mouseout", this._unHoverHandler); 
$addHandler(this.get_element(), "blur", this._unHoverHandler); 

if (this._hoverElement){ 
$addHandler(this._hoverElement, "mouseover", this._hoverHandler); 
$addHandler(this._hoverElement, "focus", this._hoverHandler); 
$addHandler(this._hoverElement, "mouseout", this._unHoverHandler); 
$addHandler(this._hoverElement, "blur", this._unHoverHandler); 
} 
}

这里，我们首先调用了基类的方法initialize。然后，我们调用MS AJAX框架内置的全局方法Function.createDelegate把两个事件代理_hoverHandler和_unHoverHandler分别绑定到两个事件处理器_onhover和_onunhover上。注意，当用户指定属性_unhoverDelay时，我们调用了事件处理器函数_delayedUnhoverHandler，该函数又进一步“包装”了处理器_onunhover，为的是当鼠标悬浮于（或焦点会聚于）目标上时可以通过window.setTimeout方法来较好地处理时间延迟的问题。一旦创建这些代理，就可以使用它们并借助于来MS AJAX全局方法$addHandler把相应事件直接“钩”到事件处理器上。有关全局方法$addHandler，在此不赘述，读者可以参考在线资源。图文结合：http://www.qqread.com/ajax/j396381.html