实例讲解《Microsoft AJAX Library》(2)：DomEvent类
引言：
大家都知道Ajax的之所以能如此豐富地實(shí)現(xiàn)，客戶端腳本功不可沒。而像Asp.Net Ajax這般龐大的工程，沒有腳本類庫的支撐是很難想象的。《Microsoft AJAX Library》就是Asp.Net Ajax的腳本類庫。其實(shí)網(wǎng)上流行的腳本類庫是很多的，也有一些是十分成功的，例如：prototype.js腳本類庫。這些腳本類庫封裝了很多常用的功能，通過使用這些腳本類庫我們能極大的提高工作效率。
這篇文章依賴于www.AspNetResources.com網(wǎng)站2007-01-24發(fā)布的《Microsoft AJAX Library》PDF版本。DflyingChen對(duì)此有完整而準(zhǔn)確的翻譯。
（文章地址：http://www.cnblogs.com/dflying/archive/2007/02/09/639638.aspx）
此篇文章面向的對(duì)象是那些可能連“prototype.js”都沒有聽說過，對(duì)“腳本類庫”一詞還很陌生的朋友。文章也只是舉一些簡單而便于理解的示例幫助他們更好的理解，所以可以說沒有任何技術(shù)含量，與DflyingChen對(duì)英文原版的發(fā)現(xiàn)和翻譯之功德相比，難及其十一。在此向DflyingChen獻(xiàn)上敬意。
相關(guān)鏈接：
實(shí)例講解《Microsoft AJAX Library》(1)：DomElement類
實(shí)例講解《Microsoft AJAX Library》(2)：DomEvent類
正文：
準(zhǔn)備工作：
1：安裝 Asp.Net Ajax（引入AjaxControlToolkit名域）。
2：頁面上拖個(gè)ToolkitScriptManager
說明：
標(biāo)注有圖標(biāo)的為靜態(tài)方法，無須實(shí)例化對(duì)象即可使用。
1：addHandler (element, eventName, handler)? 或者 $addHandler (element, eventName, handler)
先說明一下帶“$”和不帶“＄”有什么區(qū)別。答案是：沒有什么特殊的區(qū)別，就是縮寫而已，功能都是一樣的，不過加了＂＄＂符號(hào)就沒有必要寫“Sys.UI.DomElement”這坨東西了，會(huì)爽一些（不過其實(shí)還是2個(gè)函數(shù)啦，只是函數(shù)名不同，但是函數(shù)主體是一樣的）。
addHandler的作用是為element元素添加eventName事件的處理函數(shù)handler。這樣說好像有點(diǎn)拗口，其實(shí)很簡單，就是給一個(gè)元素添加一個(gè)事件。
具體使用請(qǐng)參看《ＤｏｍＥｖｅｎｔ示例頁面》源碼的yzy_addHandler和yzy_addHandler_clickhandler函數(shù)。
2：addHandlers (element, events, handlerOwner) 或者 $addHandlers (element, events, handlerOwner)
為element元素添加多個(gè)事件的相應(yīng)的處理函數(shù)。這樣說好像有點(diǎn)拗口，其實(shí)很簡單，就是給一個(gè)元素同時(shí)添加多個(gè)事件。
具體使用請(qǐng)參看《ＤｏｍＥｖｅｎｔ示例頁面》源碼的yzy_addHandlers函數(shù)以及yzy_addHandler_mousemoveHandler和yzy_addHandler_mouseoutHandler函數(shù)
3：clearHandlers (element) 或者 $clearHandlers (element)
將element元素?fù)碛械乃惺录幚砗瘮?shù)去掉。
這個(gè)沒有什么好說的，具體使用請(qǐng)參看《ＤｏｍＥｖｅｎｔ示例頁面》源碼的yzy_ clearHandlers函數(shù)吧。
4：removeHandler (element, eventName, handler) 或者 $ removeHandler (element, eventName, handler)
去掉element元素中指定的事件處理函數(shù)。和addHandler正好相反。
具體使用請(qǐng)參看《ＤｏｍＥｖｅｎｔ示例頁面》源碼的yzy_ removeHandler函數(shù)。
5：preventDefault ()
阻止執(zhí)行默認(rèn)的事件處理函數(shù)。這個(gè)好像不太好理解，讓我來說白一點(diǎn)吧。例如一個(gè)超鏈接。它的點(diǎn)擊事件就是打開鏈接，對(duì)吧。這個(gè)打開鏈接的事件是默認(rèn)的?，F(xiàn)在你為超鏈添加了click事件。這時(shí)候，你再點(diǎn)擊超鏈接，它會(huì)先后做兩件事情：執(zhí)行你的click事件，然后打開鏈接。但是我們?nèi)绻幌胱屗鼒?zhí)行click事件，而不想讓它打開鏈接，那么就用這個(gè)吧。
有的朋友可能會(huì)說：用“#”號(hào)代替超鏈地址不就可以了嗎？那你看到地址欄里面的那個(gè)“#”很爽嗎？
具體使用請(qǐng)參看《ＤｏｍＥｖｅｎｔ示例頁面》源碼的yzy_ preventDefault函數(shù)吧。注意：要先用removeHandler函數(shù)添加click事件才可以。不要直接在標(biāo)簽里面寫onclick事件。
6：stopPropagation ()
阻止事件冒泡傳遞至父元素。有些朋友可能對(duì)javascript的事件冒泡不是很屬性，所以請(qǐng)?jiān)试S我在此說明一下。其實(shí)事件的冒泡還是很好理解的。例如一個(gè)div里面包了一個(gè)圖片，圖片和div都有onClick事件。這時(shí)候當(dāng)你點(diǎn)擊圖片的時(shí)候，不僅會(huì)觸發(fā)圖片的onClick事件，而且點(diǎn)擊事件會(huì)冒泡，同時(shí)會(huì)觸發(fā)div的onClick事件。這個(gè)就是javascropt的事件冒泡。為了便于大家的理解下面有一個(gè)完整的例子供你參考：
<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 ()都沒有圖標(biāo)，注意它們的用法和以前的區(qū)別。
下面是《ＤｏｍＥｖｅｎｔ示例頁面》的源代碼：
<%@?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)//添加一個(gè)click事件
????}
????
????function?yzy_addHandlers(){??//添加mouseover和mouseout2個(gè)事件
????????$addHandlers($get("imgTest"),{
??????????????????????????????????????mousemove:yzy_addHandler_mousemoveHandler,
??????????????????????????????????????mouseout:yzy_addHandler_mouseoutHandler
??????????????????????????????????????});
????}
????
????function?yzy_clearHandlers(){?//移除imgTest的所有事件
????????$clearHandlers($get("imgTest"))
????}
????
????function?yzy_removeHandler(){?//移除imgTest的click事件函數(shù)
????????$removeHandler($get("imgTest"),"click",yzy_addHandler_clickHandler)
????}
????function?yzy_preventDefault(){
????????$addHandler($get("aTest"),"click",?yzy_clcikA)//添加一個(gè)click事件
????}
????
????function?yzy_clcikA(e){
????alert(e.type);????
????//e.preventDefault();?//把這句釋放出來，你會(huì)發(fā)現(xiàn)那個(gè)新畫面彈不出來了。因?yàn)閜reventDefault去掉了a默認(rèn)的click事件處理的事件。
????}
????
????function?yzy_stopPropagation(){
????????$addHandler($get("imgTest"),"click",?yzy_addHandler_clickHandler_stopPropagation)//img添加一個(gè)click事件
????????$addHandler($get("divTest"),"click",?yzy_addHandler_clickHandler_divClcik)//div添加一個(gè)click事件
????}
????
????
????//下面的都是事件處理函數(shù)。
????function?yzy_addHandler_clickHandler(e){
????????alert("You?"?+??e.type?+"??the??"?+?e.rawEvent.srcElement.id);?//e.type：觸發(fā)事件的事件類型,e.rawEvent.srcElement：觸發(fā)事件的元素，注意：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>(先點(diǎn)addHandler按鈕添加click事件，再移除)</span><br?/>
????????<input?id="Button5"?type="button"?value="preventDefault"?onclick="yzy_preventDefault();"?/><span>(點(diǎn)擊此按鈕會(huì)先給超鏈添加click事件，然后移除它的默認(rèn)事件)</span><br?/>
????????<input?id="Button6"?type="button"?value="stopPropagation?"?onclick="yzy_stopPropagation();"?/><span>(點(diǎn)擊此按鈕會(huì)先給img和紅色邊框的div添加click事件，然后阻止img的事件冒泡到div)</span><br?/>
????</form>
</body>
</html>
keyword:Microsoft AJAX Library,DomElement,DomEvent,ajax DomEvent類,ajax DomElement類,腳本類庫,javascript類庫
總結(jié)
以上是生活随笔為你收集整理的实例讲解《Microsoft AJAX Library》(2)：DomEvent类的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]两分钟让你明白什么是ERP！
- 下一篇： 总结基于ArcGIS Server 9.