实例讲解《Microsoft AJAX Library》(2)：DomEvent类

引言：
大家都知道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献上敬意。

正文：
准备工作：
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的事件冒泡。为了便于大家的理解下面有一个完整的例子供你参考：

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 ()都没有

图标，注意它们的用法和以前的区别。

下面是《ＤｏｍＥｖｅｎｔ示例页面》的源代码：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DomEvent.aspx.vb" Inherits="AjaxExample.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类库

posted @ 2007-08-09 14:36 阿一(杨正祎) 阅读(3238) 评论(14) 收藏举报

刷新页面返回顶部