VS2008、C# 3.0
Asp.Net Ajax Core Library提供了丰富的客户端Javascript扩展,本篇主要提到的是它对操作页面DOM元素的若干功能扩展。这些扩展,可以让我们可以更方便的访问页面element,定制event handler,并且有效的隔离了不同浏览器的差异。
完成此功能的是,在Sys.UI名称控件下的两个类:Sys.UI.DomElement、Sys.UI.DomEvent
1. Sys.UI.DomElement
Sys.UI.DomElement.getElementById(String id, element)
获取页面元素对象,等价于$get()
element参数表示限定在该element的子节点中查找,如果没有找到则返回null
var o
=
Sys.UI.DomElement.getElementById(
"
txtUserName
"
);
o.value
=
"
guozhijian
"
;
Sys.UI.DomElement.getLocation(element)
获得页面元素相对于窗体或frame的位置 x,y
var location
=
Sys.UI.DomElement.getLocation($
get
(
"
txtUserName
"
));
var l
=
location.x;
var t
=
location.y;
Sys.UI.DomElement.setLocation(element, number x, number y)
设置element的位置,此位置跟parent node有关,如果parent node的position设置为absolute或relative,则此位置为相对于parent node的位置,否则为相对于窗体或frame的位置
Sys.UI.DomElement.setLocation($
get
(
"
txtUserName
"
),
0
,
0
);
Sys.UI.DomElement.getBounds(element)
获得element的边界信息
var b
=
Sys.UI.DomElement.getBounds($
get
(
"
txtUserName
"
));
var height
=
b.height;
var width
=
b.width;
var x
=
b.x;
var y
=
b.y;
Sys.UI.DomElement.addCssClass(element, String className)
给element添加css class
<
style type
=
"
text/css
"
>
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
.flatBorder
{ border:solid 1px #FF0000; }
</
style
>
Sys.UI.DomElement.addCssClass($
get
(
"
txtUserName
"
),
"
flatBorder
"
);
Sys.UI.DomElement.removeCssClass(element, String className)
移除element的css class
Sys.UI.DomElement.toggleCssClass(element, String className)
如果element已有该css class则移除,否则添加
Sys.UI.DomElement.containsCssClass(element, string className)
判断element是否有该css class
2. Sys.UI.DomEvent
Sys.UI.DomElement.addHandler(element, String eventName, Function handler)
等价于 $addHandler
订阅事件处理函数,传递一个 Sys.UI.DomEvent实例参数evt,通过这个evt参数,可以获得触发该事件的若干信息
Sys.UI.DomEvent.addHandler($
get
(
"
btnCommit
"
),
"
mousedown
"
,btnCommitMouseDown);
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function btnCommitMouseDown(evt)
{
}
Sys.UI.DomElement.removeHandler(element, string eventName, Function handler)
等价于 $removeHandler
移除事件处理函数
Sys.UI.DomEvent.removeHandler($
get
(
"
btnCommit
"
),
"
mousedown
"
,btnCommitMouseDown);
Sys.UI.DomElement.addHandlers(element, object events, handlerOwner)
应该怎么说?批量订阅事件处理方法
Sys.UI.DomEvent.addHandlers($
get
(
"
btnCommit
"
),
{"click":btnCommitClick, "keypress":btnCommitKeyPress}
);
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function btnCommitClick(evt)
{
alert(evt.type);
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function btnCommitKeyPress(evt)
{
alert(evt.type);
}
Sys.UI.DomElement. clearHandlers(element)
就是批量移除所有事件订阅
注:图片取自Asp.Net Ajax In Action
Asp.Net Ajax Core Library提供了丰富的客户端Javascript扩展,本篇主要提到的是它对操作页面DOM元素的若干功能扩展。这些扩展,可以让我们可以更方便的访问页面element,定制event handler,并且有效的隔离了不同浏览器的差异。
完成此功能的是,在Sys.UI名称控件下的两个类:Sys.UI.DomElement、Sys.UI.DomEvent
![](https://i-blog.csdnimg.cn/blog_migrate/8a7dfc6be806426e2888b88df7a7795e.gif)
1. Sys.UI.DomElement
Sys.UI.DomElement.getElementById(String id, element)
获取页面元素对象,等价于$get()
element参数表示限定在该element的子节点中查找,如果没有找到则返回null
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
Sys.UI.DomElement.getLocation(element)
获得页面元素相对于窗体或frame的位置 x,y
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
Sys.UI.DomElement.setLocation(element, number x, number y)
设置element的位置,此位置跟parent node有关,如果parent node的position设置为absolute或relative,则此位置为相对于parent node的位置,否则为相对于窗体或frame的位置
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
Sys.UI.DomElement.getBounds(element)
获得element的边界信息
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
Sys.UI.DomElement.addCssClass(element, String className)
给element添加css class
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
Sys.UI.DomElement.removeCssClass(element, String className)
移除element的css class
Sys.UI.DomElement.toggleCssClass(element, String className)
如果element已有该css class则移除,否则添加
Sys.UI.DomElement.containsCssClass(element, string className)
判断element是否有该css class
2. Sys.UI.DomEvent
Sys.UI.DomElement.addHandler(element, String eventName, Function handler)
等价于 $addHandler
订阅事件处理函数,传递一个 Sys.UI.DomEvent实例参数evt,通过这个evt参数,可以获得触发该事件的若干信息
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
Sys.UI.DomElement.removeHandler(element, string eventName, Function handler)
等价于 $removeHandler
移除事件处理函数
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
Sys.UI.DomElement.addHandlers(element, object events, handlerOwner)
应该怎么说?批量订阅事件处理方法
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
Sys.UI.DomElement. clearHandlers(element)
就是批量移除所有事件订阅
注:图片取自Asp.Net Ajax In Action