引言：
大家都知道Ajax的之所以能如此丰富地实现，客户端脚本功不可没。而像Asp.Net Ajax这般庞大的工程，没有脚本类库的支撑是很难想象的。《Microsoft AJAX Library》就是Asp.Net Ajax的脚本类库。其实网上流行的脚本类库是很多的，也有一些是十分成功的，例如：prototype.js脚本类库。这些脚本类库封装了很多常用的功能，通过使用这些脚本类库我们能极大的提高工作效率。
这篇文章依赖于www.AspNetResources.com网站2007-01-24发布的《Microsoft AJAX Library》PDF版本。DflyingChen对此有完整而准确的翻译。
（文章地址：http://www.cnblogs.com/dflying/archive/2007/02/09/639638.aspx）
此篇文章面向的对象是那些可能连“prototype.js”都没有听说过，对“脚本类库”一词还很陌生的朋友。文章也只是举一些简单而便于理解的示例帮助他们更好的理解，所以可以说没有任何技术含量，与DflyingChen对英文原版的发现和翻译之功德相比，难及其十一。在此向DflyingChen献上敬意。
相关链接：
实例讲解《Microsoft AJAX Library》(1)：DomElement类
实例讲解《Microsoft AJAX Library》(2)：DomEvent类
正文：
准备工作：
1：安装 Asp.Net Ajax（引入AjaxControlToolkit名域）。
2：页面上拖个ToolkitScriptManager
说明：
标注有
图标的为静态方法，无须实例化对象即可使用。1：addHandler (element, eventName, handler) 或者 $addHandler (element, eventName, handler)
先说明一下带“$”和不带“＄”有什么区别。答案是：没有什么特殊的区别，就是缩写而已，功能都是一样的，不过加了＂＄＂符号就没有必要写“Sys.UI.DomElement”这坨东西了，会爽一些（不过其实还是2个函数啦，只是函数名不同，但是函数主体是一样的）。
addHandler的作用是为element元素添加eventName事件的处理函数handler。这样说好像有点拗口，其实很简单，就是给一个元素添加一个事件。
具体使用请参看《ＤｏｍＥｖｅｎｔ示例页面》源码的yzy_addHandler和yzy_addHandler_clickhandler函数。
2：addHandlers (element, events, handlerOwner) 或者 $addHandlers (element, events, handlerOwner)
为element元素添加多个事件的相应的处理函数。这样说好像有点拗口，其实很简单，就是给一个元素同时添加多个事件。
具体使用请参看《ＤｏｍＥｖｅｎｔ示例页面》源码的yzy_addHandlers函数以及yzy_addHandler_mousemoveHandler和yzy_addHandler_mouseoutHandler函数
3：clearHandlers (element) 或者 $clearHandlers (element)
将element元素拥有的所有事件处理函数去掉。
这个没有什么好说的，具体使用请参看《ＤｏｍＥｖｅｎｔ示例页面》源码的yzy_ clearHandlers函数吧。
4：removeHandler (element, eventName, handler) 或者 $ removeHandler (element, eventName, handler)
去掉element元素中指定的事件处理函数。和addHandler正好相反。
具体使用请参看《ＤｏｍＥｖｅｎｔ示例页面》源码的yzy_ removeHandler函数。
5：preventDefault ()
阻止执行默认的事件处理函数。这个好像不太好理解，让我来说白一点吧。例如一个超链接。它的点击事件就是打开链接，对吧。这个打开链接的事件是默认的。现在你为超链添加了click事件。这时候，你再点击超链接，它会先后做两件事情：执行你的click事件，然后打开链接。但是我们如果只想让它执行click事件，而不想让它打开链接，那么就用这个吧。
有的朋友可能会说：用“#”号代替超链地址不就可以了吗？那你看到地址栏里面的那个“#”很爽吗？
具体使用请参看《ＤｏｍＥｖｅｎｔ示例页面》源码的yzy_ preventDefault函数吧。注意：要先用removeHandler函数添加click事件才可以。不要直接在标签里面写onclick事件。
6：stopPropagation ()
阻止事件冒泡传递至父元素。有些朋友可能对javascript的事件冒泡不是很属性，所以请允许我在此说明一下。其实事件的冒泡还是很好理解的。例如一个div里面包了一个图片，图片和div都有onClick事件。这时候当你点击图片的时候，不仅会触发图片的onClick事件，而且点击事件会冒泡，同时会触发div的onClick事件。这个就是javascropt的事件冒泡。为了便于大家的理解下面有一个完整的例子供你参考：
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< meta http-equiv ="Content-Language" content ="zh-CN" />
< meta name ="Keywords" content ="" />
< meta name ="Description" content ="" />
< title ></ title >
< style type ="text/css" >
* {
font-size : medium ;
margin : 0 ;
padding : 0 ;
}
div {
border : 1px solid red ;
width : 100px ;
height : 100px ;
}
img {
border : 2px solid green ;
width : 50px ;
height : 50px ;
}
</ style >
< script type ="text/javascript" language ="javascript" >
function divClick(e){
alert( " div's click " );
}
function imgClick(){
alert( " img's click " );
// window.event.cancelBubble = true;// 释放这句话，事件就不能向上冒泡了(only for IE)
}
</ script >
</ head >
< body >
< div onclick ="divClick(this);" >
< img src ='xxx.gif' onclick ="imgClick();" >
</ div >
</ body >
</ html >
注意preventDefault () 和stopPropagation ()都没有
图标，注意它们的用法和以前的区别。
下面是《ＤｏｍＥｖｅｎｔ示例页面》的源代码：
<% @ Register Assembly = " AjaxControlToolkit " Namespace = " AjaxControlToolkit " TagPrefix = " cc1 " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > DomEvent 示例页面 </ title >
< style type ="text/css" >
* {
font-size : medium ;
}
span {
color : red ;
font-size : 80% ;
margin-right : 3em ;
}
#divTest {
margin : 10px 0 200px 10px ;
border : 1px solid red ;
width : 100px ;
height : 100px ;
}
</ style >
< script type ="text/javascript" language ="javascript" >
function yzy_addHandler(){
$addHandler($get( " imgTest " ), " click " , yzy_addHandler_clickHandler) // 添加一个click事件
}
function yzy_addHandlers(){ // 添加mouseover和mouseout2个事件
$addHandlers($get( " imgTest " ),{
mousemove:yzy_addHandler_mousemoveHandler,
mouseout:yzy_addHandler_mouseoutHandler
});
}
function yzy_clearHandlers(){ // 移除imgTest的所有事件
$clearHandlers($get( " imgTest " ))
}
function yzy_removeHandler(){ // 移除imgTest的click事件函数
$removeHandler($get( " imgTest " ), " click " ,yzy_addHandler_clickHandler)
}
function yzy_preventDefault(){
$addHandler($get( " aTest " ), " click " , yzy_clcikA) // 添加一个click事件
}
function yzy_clcikA(e){
alert(e.type);
// e.preventDefault(); //把这句释放出来，你会发现那个新画面弹不出来了。因为preventDefault去掉了a默认的click事件处理的事件。
}
function yzy_stopPropagation(){
$addHandler($get( " imgTest " ), " click " , yzy_addHandler_clickHandler_stopPropagation) // img添加一个click事件
$addHandler($get( " divTest " ), " click " , yzy_addHandler_clickHandler_divClcik) // div添加一个click事件
}
// 下面的都是事件处理函数。
function yzy_addHandler_clickHandler(e){
alert( " You " + e.type + " the " + e.rawEvent.srcElement.id); // e.type：触发事件的事件类型,e.rawEvent.srcElement：触发事件的元素，注意：FF不支持rawEvent，此处为演示清晰才使用的
}
function yzy_addHandler_mousemoveHandler(e){
alert( " You " + e.type + " the " + e.rawEvent.srcElement.id);
}
function yzy_addHandler_mouseoutHandler(e){
alert( " You " + e.type + " the " + e.rawEvent.srcElement.id);
}
function yzy_addHandler_clickHandler_divClcik(){
alert( " div's click! " );
}
function yzy_addHandler_clickHandler_stopPropagation(e){
alert( " You " + e.type + " the " + e.rawEvent.srcElement.id);
e.stopPropagation(); // 你可以通过注释掉此句来感受事件的冒泡。
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< cc1:ToolkitScriptManager ID ="ToolkitScriptManager1" runat ="server" >
</ cc1:ToolkitScriptManager >
</ div >
< div id ="divTest" >
< img src ="images/003.gif" id ="imgTest" alt ="a Image!" />
< a href ="#" target ="_blank" id ="aTest" > i'm a </ a >
</ div >
< input id ="Button1" type ="button" value ="addHandler" onclick ="yzy_addHandler();" />
< input id ="Button2" type ="button" value ="addHandlers" onclick ="yzy_addHandlers();" />< br />
< input id ="Button3" type ="button" value ="clearHandlers" onclick ="yzy_clearHandlers();" />< span > (先添加事件，再移除) </ span >< br />
< input id ="Button4" type ="button" value ="removeHandler" onclick ="yzy_removeHandler();" />< span > (先点addHandler按钮添加click事件，再移除) </ span >< br />
< input id ="Button5" type ="button" value ="preventDefault" onclick ="yzy_preventDefault();" />< span > (点击此按钮会先给超链添加click事件，然后移除它的默认事件) </ span >< br />
< input id ="Button6" type ="button" value ="stopPropagation " onclick ="yzy_stopPropagation();" />< span > (点击此按钮会先给img和红色边框的div添加click事件，然后阻止img的事件冒泡到div) </ span >< br />
</ form >
</ body >
</ html >
keyword:Microsoft AJAX Library,DomElement,DomEvent,ajax DomEvent类,ajax DomElement类,脚本类库,javascript类库
1414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
