Microsoft Asp.Net Ajax架構入門(3) 操作DOM元素

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的子節點中尋找，如果沒有找到則返回nullvar o = Sys.UI.DomElement.getElementById("txtUserName");
o.value = "guozhijian";

    Sys.UI.DomElement.getLocation(element)
        獲得頁面元素相對於表單或frame的位置 x,yvar 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">
        .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);
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});
            
function btnCommitClick(evt) {
    alert(evt.type);
}
function btnCommitKeyPress(evt) {
    alert(evt.type);
}

    Sys.UI.DomElement.clearHandlers(element)
        就是大量移除所有事件訂閱

註：圖片取自Asp.Net Ajax In Action