实例讲解《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献上敬意。

相关链接：
实例讲解《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。这样说好像有点拗口，其实很简单，就是给一个元素添加一个事件。
具体使用请参看《ＤｏｍＥｖｅｎｔ示例页面》源码的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类库