web前端之JavaScript高級程序設(shè)計六：事件_第1頁
web前端之JavaScript高級程序設(shè)計六：事件_第2頁
web前端之JavaScript高級程序設(shè)計六：事件_第3頁
web前端之JavaScript高級程序設(shè)計六：事件_第4頁
web前端之JavaScript高級程序設(shè)計六：事件_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

web前端之JavaScript高級程序設(shè)計六：事件JavaScript與HTML之間的交互是通過事件實現(xiàn)的。事件，就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂脗陕犉鳎ɑ蛱幚沓绦颍﹣眍A(yù)訂事件，以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。這種在傳統(tǒng)軟件工程中被稱為觀察員模式的模型，支持頁面的行為（JavaScript代碼》與頁面的外觀（HTML和CSS代碼）之間的松散耦合。事件流：事件流描述的是從頁面中接收事件的順序。但有意思的是，正和Netscape開發(fā)團(tuán)隊居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而NetscapeCommunicator的事件流是并件捕獲流。事件冒泡：IE的事件流叫做事件冒泡（eventbubbling）,即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。也就是說，dick班件苒先在div元素上發(fā)生，而這個元素就是我們單擊的元素。然后,dick事件沿DOM樹向上傳播，在每一級節(jié)點上都會發(fā)生，直至傳播到document對象。這里寫圖片描述事件捕獲：中件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接收到齊件，而最具體的節(jié)點應(yīng)該最后接收到旺件。中件捕獲的用意在于在亦件到達(dá)預(yù)定目標(biāo)之前捕獲它。這里寫圖片描述由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲。我們也建議讀者放心地使用事件冒泡，在有特殊需要時再使川事件捕獲。DOM事件流：“D0M2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標(biāo)接收到事件。最后一個階段是目泡階段，可以在這個階段時事件做出響應(yīng)。這里寫圖片描述事件處理程序：事件就是用戶或瀏覽器自身執(zhí)行的某種動作。諸如click、load和mouseover,都是事件的名字。而響應(yīng)某個葬件的函數(shù)就叫做事件處理程序（或用件偵聽器）。事件處理程序的名字以“on”開頭，因此click事件的并件處理程序就是onclick,load事件的事件處理程序就是onload。為事件指定處理程序的方式有好幾種。HTMI事件處理程序：某個元素支持的每種事件，都可以使用一個與相應(yīng)事件處理程序同名的HTML特性來指定。這個特性的值應(yīng)該是能夠執(zhí)行的JavaScript代碼。例如，要在按鈕被單.擊時執(zhí)行一些JavaScript：<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http;//"><htmlxmlns=""xml:lang="en''><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>!jif-^/titlo<scripttype="text/javascript">functionshowMessage(){<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns="http:〃"xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DOM中的事件對象<scripttype="text/javascript">window.onload=function(){varbtn=document.getElementByld("myBtn");varhandler=function(event){switch(event.type){case"click":alertC'Clicked");break;case"mouseover":alert("Mouseover");break;case"mouseout":alert("Mouseout");break;))；btn.onclick=handler;btn.ommouseover=handler;btn.onmouseout=handler;)；</$cript></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>要阻止特定事件的默認(rèn)行為，可以使用preventDefault()方法。例如，鏈接的默認(rèn)行為就是在被單擊時會導(dǎo)航到其href特性指定的URL,如果你想阻止鏈接導(dǎo)航這一默認(rèn)行為，那么通過鏈接的。nclick事件處理程序可以取消它，如下面的例子所示。varlink=document.getElementByld("myLink");link.onclick-function(event){event.preventDefault();)；只有cancelable屬性設(shè)置為true的事件，才可以使用preventDefault。來取消其默認(rèn)行為。另外，stopPropagation。方法用于立即停止事件在D0M層次中的傳播，即取消進(jìn)一步的事件捕獲或冒泡.例如，直接添加到一個按鈕的事件處理程序可以調(diào)用stopPropagation(),從而避免觸發(fā)注冊在document.body上面的事件處理程序:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTMLl.V/EN"""><htmlxmlns=""xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DOM中的事件對象<scripttype="text/javascript">window.onload=function(){varbtn=document.getElerr)entByld("myBtn");btn.onclick=function(event){alertf'Clicked");event.stopPropagation();}；document.body.onclick=function(event){alertf'BodyClicked");}；}；</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>事件類型：注意：前面需要加下面這段代碼varEventUtil={addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}elseif(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+typel=handler;)),removeHandler:function(element,type,handler)(if(element.removeEventListener){element.removeEventListener(type,handler,false);}elseif(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on,"+typel=null;Web瀏覽器中可能發(fā)生的事件有很多類型。如前所述，不同的事件類型具有不同的信息而“D0M3級事件”規(guī)定了以下幾類事件。UI（UserInterface,用戶界面）事件，當(dāng)用戶與頁面上的元素交互時觸發(fā)；焦點事件，當(dāng)元素獲得或失去焦點時觸發(fā)；鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁面上執(zhí)行操作時觸發(fā)：滾輪用件，當(dāng)使用鼠標(biāo)滾輪（或類似設(shè)備）時觸發(fā)：文本事件，當(dāng)在文檔中輸入文本時觸發(fā)：鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)：合成事件，當(dāng)為IME（InputMethodEditor,輸入法編輯器）輸入字符時觸發(fā)；UI事件:UI事件指的是那些不一定與用戶操作有關(guān)的事件。這些事件在DOM規(guī)范出現(xiàn)之前，都是以這種或那種形式存在的，而在DOM規(guī)范中保留是為了向后兼容?，F(xiàn)有的UI事件如下。DOMActivate：表示元素已經(jīng)被用戶操作（通過鼠標(biāo)或鍵盤）激活。這個事件在D0M3級事件中被廢棄，但Firefox2+和Chrome支持它?？紤]到不同瀏覽器實現(xiàn)的差異，不建議使用這個事件。load：當(dāng)頁面完全加載后在window上面觸發(fā)，當(dāng)所有框架都加載完畢時在框架架上面觸發(fā)，當(dāng)圖像加載完畢時在img元素上面觸發(fā)，或者當(dāng)嵌入的內(nèi)容加載完畢時在object元素上面觸發(fā)。unload：當(dāng)頁面完全卸載后在window上面觸發(fā)，當(dāng)所有框架都卸載后在框架集上面觸發(fā)，或者當(dāng)嵌入的內(nèi)容卸載完畢后在。bject元素上面觸發(fā)。abort：在用戶停止下教過程時，如果嵌入的內(nèi)容沒有加載完，則在object元素上面觸發(fā)。error：當(dāng)發(fā)生JavaScript錯誤時在window上面觸發(fā)，當(dāng)無法加載圖像時在img元素上面觸發(fā)，當(dāng)無法加載嵌入內(nèi)容時在。bject元素上面觸發(fā)，或者當(dāng)有一或多個框架無法加載時在框架集上面觸發(fā)。后續(xù)將維續(xù)討論這個事件。select：當(dāng)用戶選擇文本框（input或texterea）中的?或多個字符時觸發(fā).后續(xù)將繼續(xù)討論這個事件。resize：當(dāng)窗口或框架的大小變化時在window或.框架上面觸發(fā)。scroll：當(dāng)用戶滾動帶滾動條的元素中的內(nèi)容時，在該元素上面觸發(fā)。body元素中包含所加載頁面的滾動條。load事件:<imgsrc="smile.gif"onload="alert('lmageloaded.')">當(dāng)圖片加載完畢之后進(jìn)行相應(yīng)的操作」varimage=document.getElementByld("mylmage");EventUtil.addHandler(image,"load",function(event){event=EventUtiLetEvent(event);alert(EventUtil.getTarget(event).src);))；unload事件:與load事件對應(yīng)的是unload事件，這個事件在文檔被完全卸載后觸發(fā)。只要用戶從一個頁面切換到另一個頁面，就會發(fā)生unload事件。而利用這個事件最多的情況是清除引用，以避免內(nèi)存泄漏。resize事件:當(dāng)瀏覽器窗口被調(diào)整到一個新的高度或?qū)挾葧r，就會觸發(fā)resize事件。這個事件在window(窗口)上面觸發(fā)，因此可以通過JavaScript或者元素中的onresize特性來指定事件處理程序。如EventUtil.addHandlerfwindow,"resize",function(event){alert("Resized");!)；scroll事件:雖然scroll事件是在window對象上發(fā)生的，但它實際表示的則是頁面中相應(yīng)元素的變化。在混雜模式下，可以通過body元素的scroIlLeft和scrollTop來監(jiān)控到這一變化：而在標(biāo)準(zhǔn)模式下,除Safari之外的所有瀏覽器都會通過html元素來反映這一變化EventUtil.addHandler(window,"scroll",function(event){if(patMode=="CSSlCompat"){alertfdocument.documentElement.scrollTop);}else{alert(document.body.scrollTop);)})；焦點事件：焦點事件會在頁面元素獲得或失去焦點時觸發(fā)。利川這些事件并與document.hasFocus。方法及document.activeElement屬性配合，可以知曉用戶在頁面上的行蹤。有以下6個焦點事件。blur：在元素失去焦點時觸發(fā)。這個并件不會冒泡：所有瀏覽器都支持它。DOMFocusIn：在元素獲得隹點時觸發(fā)。這個事件與HTML事件focus等價，但它冒泡。只有'Opera支持這個事件。D0M3級事件廢棄了DOMFocusIn,選擇了focusin,.DOMFocusOut：在元素失去焦點時觸發(fā)。這個事件是HTML事件blur的通用版本。只有Opera支持這個事件D0M3級事件廢棄了DOMFocusOut,選擇了focusout,focus：在元素獲得焦點時觸發(fā)。這個事件不會冒泡；所有瀏覽器都支持它。focusin：在元素獲得焦點時觸發(fā)。這個事件與HTML事件focus等價,但它回泡。支持這個事件的瀏覽器有IE5.5+、Safari5.1+,Opera11.5+和Chrome。focusout：在元素失去焦點時觸發(fā)。這個步件是HTML步件blur的通用版本。支持這個事件的瀏覽器有IE5.5+、Safari5.1+、Opera11.5+和Chrome□IE的方式最后被D0M3級事件采納為標(biāo)準(zhǔn)方式。當(dāng)焦點從頁面中的一個元素移動到另一個元素，會依次觸發(fā)下列事件：focusout在失去焦點的元素上觸發(fā)：focusin在獲得焦點的元素上觸發(fā)：⑶blur在失去焦點的元素上觸發(fā)：DOMFocusOut在失去焦點的元素上觸發(fā)：focus在獲得焦點的元素上觸發(fā)；⑹DOMFocusIn在獲得焦點的元素匕觸發(fā)。其中，blur.DOMFocusOut和fQCU$out的事件目標(biāo)是失去焦點的元索；而focus.DOMFocusIn和focusin的事件目標(biāo)是獲得焦點的元索.鼠標(biāo)與滾輪事件：click：在用戶單擊主鼠標(biāo)按鈕(一股是左邊的按鈕)或者按下回車鍵時觸發(fā)。這一點對確保易訪問性很重要，意味著onclick事件處理程序既可以通過犍盤也可以通過鼠標(biāo)執(zhí)行。dblclick：在用戶雙擊主鼠標(biāo)按鈕(一-般是左邊的按鈕)時觸發(fā)。從技術(shù)上說，這個事件并不是D0M2級事件規(guī)范中規(guī)定的，但鑒于它得到了廣泛支持，所以D0M3級事件將其納入了標(biāo)mousedown：在用戶按下了任意鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)。D0M2級事件并沒有定義這個事件，但DOM3級事件將它納入/規(guī)范。IE、Firefox9+<fllOpera支持這個事件。mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動到元素范圍之外時觸發(fā)。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)。D0M2級事件并沒有定義這個事件，但D0M3級事件將它納入了規(guī)范。IE、Firefox9+和Opera支持這個事件。mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動時重免地觸發(fā)。不能通過鍵盤觸發(fā)這個事件。mouseout：在鼠標(biāo)指針位于一個元素上方，然后用戶將其移入另一個元素時觸發(fā)。又移入的另一個元素可能位于前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發(fā)這個事件。mouseover：在鼠標(biāo)指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。mouseup：在用戶釋放鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。內(nèi)存和性能：由于事件處理程序可以為現(xiàn)代Web應(yīng)用程序提供交互能力，因此許多開發(fā)人員會不分青紅皂白地向頁面中添加大量的處理程序。在創(chuàng)建GUI的語言(如C#)中，為GUI中的每個按鈕添加一個onclick事件處理程序是司空見慣的事，而且這樣做也不會導(dǎo)致什么問題?？墒窃贘avaScript中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能。導(dǎo)致這一問題的原因是多方面的。首先，每個函數(shù)都是對象，都會占用內(nèi)存；內(nèi)存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。事實上，從如何利用好事件處理程序的角度出發(fā)，還是有一些方法能夠提升性能的。事件委托:對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，click事件會一直冒泡到document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。照理來說，實現(xiàn)多種點擊效果，我們應(yīng)該做成以卜.這樣的形式，：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns="http:〃"xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>內(nèi)存和性能〈/title)<scripttype="text/javascript">window.onload=function(){varEventUtil={addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListenerftype.handlerJalse);)Event){element.attachEvent("on"+type,handler)；}else{element("on"+type]=handler;}|,removeHandler：function(element,type,handler){if(element.removeEventListener){element.removeEventListener(type,handler,false);}elseif(element.detachEvent){element.detachEvent("on"+type,handler);}else{element("on"+type]=null;)})；variteml=document.getElementByld("goSomewhere");varitem2=document.getElementByldf'doSomething");varitem3=document.getElementByld("sayHi");EventUtil.addHandlerfiteml,"click",function(event){location.href="";})；EventUtil.addHandler(item2,"click",function(event){document.title="Ichangedthedocument'stitle";})；EventUtil.addHandler(item3,"click",function(event){alert("hi");})；}；</script></head><body><ulid="myLinks"><liid="goSomewhere">Gosomewhere</li><liid="doSomewhere">Dosomewhere</li><liid="sayHi">Sayhi</li></ul></body></html>但是這樣會出現(xiàn)錯誤，所以我們引入了事件委托：<!D0C7TYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns="http:〃"xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">＜title＞事件委托＜八代比＞<scripttype="text/javascript">window.onload=function(){varEventUtil={addHandler：function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}elseif(element.attachEvent){element.auachEventf'on"+type,handler);}else{element["on"+type]=handler;)},removeHandler:function(element,type,handler){if(element.removeEventListener){element.removeEventListenerftype,handler,false);}elseif(element.detachEvent){element.detachEvent("on"+type,handler);}else{element("on"+type)=null;)},getEvent:function(event){returnevent?event:window.event;},getTarget:function(event){returnevent.target11event.srcElement;},preventDefault:function(event){if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;)},stopPropagation:function(event){if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubbles=true;}},getRelatedTarget:function(event){if(event.relatedTarger){returnevent.relatedTarget;}elseif(event.toElement){returnevent.toElement;}elseif(event.fromElement){returnevent.fromElement;}else{returnnull;}}；varlist=document.getElementByld("myLinks");EventUtil.addHandler(list,"click",function(event){event=EventUtil.getEvent(event);vartarget=EventUtil.getTarget(event);switch(target.id){case"doSomewhere":document.title="lLOVECHINA.";break;casel,goSomewhere,':location.href="";break;case"sayHi":alert("Hi")；break;)})；)；</$cript></head><body><ulid="myLinks"><liid="goSomewhere">Gosomewhere</li><liid="doSomewhere">Dosomewhere</li><liid="sayHi">Sayhi</li></ul></body></html>與前面未使用事件委托的代碼比一比，會發(fā)現(xiàn)這段代碼的事前消耗更低，因為只取得了一個DOM元素，只添加了一個事件處理程序。雖然對用戶來說最終的結(jié)果相同，但這種技術(shù)需要占用的內(nèi)存更少。所有用到按鈕的事件（多數(shù)鼠標(biāo)事件和鍵盤事件）都適合采用事件委托技術(shù)。移除事件處理程序：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">移除去：件處理程序〈/title〉<scripttype="text/javascript"></script></head><body><divid="myDiv"><inputtype="button"value="ClickMe"id="myBtn"></div><scripttype="text/javascript">varbtn=document.getElerr)entByld("rr)yBtn");btn.onclick=function(){btn.onclick=nuH;〃移出事件處理程序document.getElementByld("myDiv").innerHTML="Processing";)；</script></body>alert("HelloWorld!")；</script></head><body><inputtype="button"value="Clickme"onclick="showMessage()"></body></html>在這個例子中，單擊按鈕就會調(diào)用showMessage。函數(shù)。這個函數(shù)是在一個獨立的script元素中定義的，當(dāng)然也可以被包含在一個外部文件中。事件處理程序中的代碼在執(zhí)行時，有權(quán)訪問全局作用域中的任何代碼。這樣指定駢件處理程序具有一些獨到之處。汗先，這樣會創(chuàng)建一個封裝者元素屬性值的函數(shù)。這個函數(shù)中有一個局部變量event,也就是事件對象(后續(xù)的學(xué)習(xí)中會有涉及)：<inputtype="button"value="ClickMe"onclick="alert(event.type)">11通過event變量，可以直接訪問事件對象，你不用自己定義它，也不用從函數(shù)的參數(shù)列表中讀取。在這個函數(shù)內(nèi)部，this值等于并件的目標(biāo)元素，例如：<inputtvpe="button"value="ClickMe"onclick="alert(this.value)">DOMO級事件處理程序：通過JavaScript指定事件處理程序的傳統(tǒng)方式，就是將一個函數(shù)賦值給一個事件處理程序?qū)傩浴＿@種為事件處理程序賦值的方法是在第四代Web瀏覽器中出現(xiàn)的，而且至今仍然為所有現(xiàn)代瀏覽器所支持。原因一是簡單，二是具有跨瀏覽器的優(yōu)勢。要使川JavaScript指定事件處理程序，首先必須取得一個要操作的對象的引用。每個元素(包括window和document)都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫，例如0ndick.將這種屬性的值設(shè)置為一個函數(shù)，就可以指定浜件處理程序，如下所示：<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">〈title〉事件〈/title〉<scripttype="text/javascript">window.onload=fur)ction(){varbtn=document.getElementByld("myBtn");btn.onclick=function(){alert("Clicked");}；)；</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>btn.onclick=null;〃刪除事件處理程序?qū)⑹录幚沓绦蛟O(shè)置,為null之壇，再單擊按鈕將不會有任何動作發(fā)生。D0M2級事件處理程序：,,D0M2級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListenerO^llremoveEventListener()o所有DOM節(jié)點中都包含這兩個方法，并且它們都接受3個參數(shù):要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true,表示在捕獲階段調(diào)用事件處理程序；如果是false,表示在冒泡階段調(diào)用事件處理程序。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns="http:〃"xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">事件</title><scripttype="text/javascript">window.onload=function(){varbtn=document.getElementByld("rr)yBtn");btn.addEventListener("click",function(){alert(this.id);},false);)；</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>使用D0M2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en,"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">〈title〉事件</title><scripttype="text/javascript">window.onload-function(){varbtn=document.getElementByld("myBtn");btn.addEventListener("click",function(){alert(this.id);},false);btn.addEventListener("click",function(){alert("HelloWord");},false);</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>這里為按鈕添加了兩個事件處理程序。這兩個事件處理程序會按照添加它們的順序觸發(fā)，因此首先會顯示元素的ID,其次會顯示“Helloworld!”消息。通過addEventlistenerO添加的事件處理程序只能使用removeEventlistener。來移除：移除時傳入的參數(shù)與添加處理程序時使用的參數(shù)相同。這也意味著通過addEventlistene")添加的匿名函數(shù)將無法移除,如下面的例子所示：<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>事件</title><scripttype="text/javascript">window.onload=function(){varbtn=document.getElementBvld("myBtn");btn.addEventListener("click",function(){alert(this.id);Lfalse);btn.addEventListener("click",function(){alert(MHelloWord");},false);btn.removeEventListener("click",function(){//S%alert(this.id);Haise);)；</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>在這個例子中，我們使用addEventlistenerO添加了一個事件處理程序。雖然調(diào)用removeEventlistener()時看似使用了相同的參數(shù)，但實際上，第二個參數(shù)與傳入addEventlistenerO中的那一個是完全不同的函數(shù)。而傳入removeEventListener。中的事件處理程序函數(shù)必須與傳入addEventLi$tener()中的相同，如下而的例子所示。<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>事件</title><scripttype="text/javascript">window.onload=function(){varbtn=document.getElementByld("myBtn");varhandler=function(){alert(this.id);)；btn.addEventListenerf'click",handler,false);btn.addEventListener("click",function(){alertC'HelloWord");},fa1se);btn.removeEventListener("click",handler,false);)；</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>重寫后的這個例子沒有問題，是因為在addEventlistener。和removeEventlistener。中使用了相同的函數(shù)。大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。鼓好只在需要在界件到達(dá)目標(biāo)之前截獲它的時候?qū)Ⅱ溂幚沓绦蛱砑拥讲东@階段。如果不是特別需要，我們不建議在技件捕獲階段注冊理件處理程序。IE事件處理程序：IE實現(xiàn)了與DOM中類似的兩個方法：attachEvent()和detachEvent()o這兩個方法接受相同的兩個參數(shù)：事件處理程序名稱與事件處理程序函數(shù)。由于1E8及更早版木只支持事件日泡，所以通過attachEvent。添加的貨件處理程序都會被添加到目泡階段。<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">〈title〉事件〈/title〉<scripttype="text/javascript">window.onload=function(){varbtn=document.getElementByld("myBtn");btn.attachEvent("onclick",function(){alert("Clicked");})；)；</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>L注意,attachEvent。的第一個參數(shù)是"ondick而非DOM的addEventUstener。方法中的"click.在IE中使用attachEvent()與使用DOMO級方法的主要區(qū)別在j：事件處理程序的作用域。在使用DOMO級方法的情況下，事件處理程序會在其所屬元素的作用域內(nèi)運行；在使用attachEvent()方法的情況下，事件處理程序會在全局作用城中運行，因此this等于window。.與addEventlistener。類似，attachEvent()方法也可以用來為一個元素添加多個事件處理程序。<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en''><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">案件</title><scripttype="text/javascript">window.onload=function(){varbtn=document.getElementByld("myBtn")；btn.attachEvent("onclick",function(){alert("Clicked");})；btn.attachEvent("onclick",function(){alert("HelloWorld!");})；)；</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>這里調(diào)用了兩次attachEvent(),為同一個按鈕添加了兩個不同的事件處理程序。不過，與DOM方法不同的是，這些事件處理程序不是以添加它們的順序執(zhí)行，而是以相反的順序被觸發(fā)。單擊這個例子中的按鈕，首先看到的是“Hell。world!”，然后才是"Clicked”。<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en''><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">vtitle>事件v/title>〈scripttype~"text/javascript">window.onload=function(){varbtn=document.getElementByld("myBtn");varhandler=function(){alert("Clicked");}；btn.attachEvent("ondick",handler);btn.detachEvent("onclick",handler);</script></head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>使用attachEvent()添加的事件可以通過detachEvent。來移除，條件是必須提供相同的參數(shù)。與DOM方法一樣，這也意味著添加的匿名函數(shù)將不能被移除。不過，只要能的將對相同函數(shù)的引用傳給detachEvent(),就可以移除相應(yīng)的事件處理程序?？鐬g覽器的事件處理程序：<IDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"""><htmlxmlns=""xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">跨瀏覽器兼容<scripttype="text/javascript">window.onload=function(){varEventUtil={addHandler：function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}elseif(element.attachEvent){element.attachEvent("on"+type,handler);}else{element("on"+type]=handler;)),removeHandler：function(element,type,handler)(if(element.removeEventListener){element.removeEventListener(type,handler,false);}elseif(element.detachEvent){element.detachEvent("on"+type,handler);}else{element("on"+type)=null;)))；)；〈/script〉</head><body><inputtype="button"id="myBtn"value="ClickedMe"></body></html>這兩個方法首先都會檢測傳入的元素中是否存在D0M2級方法。如果存在D0M2級方法，則使用該方法：傳入事件類型、事件處理程序函數(shù)和第三個參數(shù)false(表示冒泡階段)。如果存在的是

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論