实例讲解《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的事件冒泡。为了便于大家的理解下面有一个完整的例子供你参考：
<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 ()都没有
图标，注意它们的用法和以前的区别。下面是《ＤｏｍＥｖｅｎｔ示例页面》的源代码：
<%@ 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类库
