引言:
大家都知道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。这样说好像有点拗口,其实很简单,就是给一个元素添加一个事件。
具体使用请参看《DomEvent示例页面》源码的yzy_addHandler和yzy_addHandler_clickhandler函数。
2:addHandlers (element, events, handlerOwner) 或者 $addHandlers (element, events, handlerOwner)
为element元素添加多个事件的相应的处理函数。这样说好像有点拗口,其实很简单,就是给一个元素同时添加多个事件。
具体使用请参看《DomEvent示例页面》源码的yzy_addHandlers函数以及yzy_addHandler_mousemoveHandler和yzy_addHandler_mouseoutHandler函数
3:clearHandlers (element) 或者 $clearHandlers (element)
将element元素拥有的所有事件处理函数去掉。
这个没有什么好说的,具体使用请参看《DomEvent示例页面》源码的yzy_ clearHandlers函数吧。
4:removeHandler (element, eventName, handler) 或者 $ removeHandler (element, eventName, handler)
去掉element元素中指定的事件处理函数。和addHandler正好相反。
具体使用请参看《DomEvent示例页面》源码的yzy_ removeHandler函数。
5:preventDefault ()
阻止执行默认的事件处理函数。这个好像不太好理解,让我来说白一点吧。例如一个超链接。它的点击事件就是打开链接,对吧。这个打开链接的事件是默认的。现在你为超链添加了click事件。这时候,你再点击超链接,它会先后做两件事情:执行你的click事件,然后打开链接。但是我们如果只想让它执行click事件,而不想让它打开链接,那么就用这个吧。
有的朋友可能会说:用“#”号代替超链地址不就可以了吗?那你看到地址栏里面的那个“#”很爽吗?
具体使用请参看《DomEvent示例页面》源码的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 ()都没有
![](https://i-blog.csdnimg.cn/blog_migrate/84dee819f970bdc51616f28ff5b8f788.png)
下面是《DomEvent示例页面》的源代码:
<% @ 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类库