domevent.aspx

ajax实例,可以了解ajax的原理

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="DomEvent.aspx.cs"
    Inherits="ClientScripting_SysUI_DomEvent" Title="Sys.UI.DomEvent Class" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <p>
        单击按钮后查看事件的详细信息
    </p>
    <p>
        <input type="button" id="Button1" value="按钮(s)" accesskey="s" />
    </p>
    <p>
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </p>
    <p>&nbsp;</p>
    <p>
        同时添加多个事件处理器
    </p>
    <p>
        <input type="button" id="Button2" value="按钮2" />
    </p>
    <p>
        <asp:Label ID="Label2" runat="server"></asp:Label>
    </p>

    <script type="text/javascript" language="javascript">
    
    // 给ID为“Button1”的元素增加“click”的事件处理器，处理方法为processEventInfo
    $addHandler($get("Button1"), "click", processEventInfo);
    
    var ary = 
    [
        // 以下为DomEvent类的Field
        'altKey', // 是否是关联的alt键触发的事件？是true；否false
        'button', // Sys.UI.MouseButton枚举，用于指定当相关事件发生时，鼠标按键的状态
        'charCode', // 触发了事件的键的字符代码
        'shiftKey', // 发生事件时是否按下了Shift键
        'clientX', // 发生事件时鼠标的x坐标
        'clientY', // 发生事件时鼠标的y坐标
        'ctrlKey', // 发生事件时是否按下了Ctrl键
        'offsetX', // 发生事件时鼠标与触发事件的对象之间的x偏移量
        'offsetY', // 发生事件时鼠标与触发事件的对象之间的y偏移量
        'screenX', // 发生事件时鼠标与用户屏幕之间的x偏移量
        'screenY', // 发生事件时鼠标与用户屏幕之间的y偏移量
        'target', // 触发事件的对象
        'type' // 被触发的事件的名称
     ];

    function processEventInfo(eventElement) 
    {
        var result = '';
        
        for (var i = 0, l = ary.length; i < l; i++) 
        {
            var arrayVal = ary[i];
            
            if (typeof(arrayVal) !== 'undefined') 
            {
                try 
                {
                    // 输出结果举例：eventElement.altKey
                    result += arrayVal + " = " + eval("eventElement." + arrayVal) + '<br/>';
                }
                catch (e)
                {
                    alert(e.message);
                }
            }
        }

        result += eventElement.target.id;
        
        $get("<%= Label1.ClientID %>").innerHTML = result;
    }
    
    </script>
    
    <script type="text/javascript" language="javascript">
    
    // 给ID为“Button2”的元素增加多个事件处理器
    Sys.UI.DomEvent.addHandlers
    (
        $get("Button2"), 
        {
            click: processEventInfo, 
            mouseover: processEventInfo, 
            mouseout: processEventInfo
        }
    );

    function processEventInfo(eventElement) 
    {
        var result = '';
        result += eventElement.type;
        $get("<%= Label2.ClientID %>").innerHTML = result;
    }
    
    </script>

</asp:Content>