網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：JavaScript事件處理-事件捕捉與事件冒泡_第1頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：JavaScript事件處理-事件捕捉與事件冒泡_第2頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：JavaScript事件處理-事件捕捉與事件冒泡_第3頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：JavaScript事件處理-事件捕捉與事件冒泡_第4頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：JavaScript事件處理-事件捕捉與事件冒泡_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

本章介紹JavaScrip的BOM對象和操作，DOM對象和操作。

JavaScript事件處理

事件捕捉與事件冒泡目錄

JavaScript事件處理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉與事件冒泡習(xí)題1010.6事件捕捉與事件冒泡10.6.1事件捕捉與事件冒泡的執(zhí)行順序當(dāng)使用事件捕獲時，父級元素先觸發(fā)，子級元素后觸發(fā)發(fā)生，click事件捕捉的順序為：document→html→body→div→p。當(dāng)使用事件冒泡時，子級元素先觸發(fā)，父級元素后觸發(fā)發(fā)生，click事件冒泡的順序為：p→div→body→html→document。并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload。綁定事件時通過addEventListener()方法，格式為：元素的對象名.addEventListener("事件名",函數(shù)名,事件流方式);【例10-21】中有3個嵌套的div元素，從外層到內(nèi)層依次為d1（綠色）、d2（黃色）、d3（藍(lán)色）。當(dāng)事件流方式的布爾值為true時，單擊藍(lán)色div區(qū)域，事件會一層層地向上傳遞，事件流順序為d1→d2→d3。當(dāng)事件流方式的布爾值為false時，事件流順序為d3→d2→d1。你可以自己修改該參數(shù)為false，然后運(yùn)行代碼。10.6事件捕捉與事件冒泡<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>事件捕捉與事件冒泡</title></head><styletype="text/css">#div1{width:200px;height:200px;background-color:#008080;/*綠色*/}#div2{width:100px;height:100px;background-color:#ffff00;/*黃色*/}#div3{width:50px;height:50px;background-color:aqua;/*藍(lán)色*/}</style>10.6事件捕捉與事件冒泡<scripttype="text/javascript">window.onload=function(){vard1=document.getElementById("div1");vard2=document.getElementById("div2");vard3=document.getElementById("div3");d1.addEventListener("click",D1,true);d2.addEventListener("click",D2,true);d3.addEventListener("click",D3,true);functionD1(){alert("執(zhí)行D1函數(shù)");};functionD2(){alert("執(zhí)行D2函數(shù)");};functionD3(){alert("執(zhí)行D3函數(shù)");};}</script>10.6事件捕捉與事件冒泡<body><divid="div1"><divid="div2"><divid="div3"></div></div></div></body></html>10.6事件捕捉與事件冒泡10.6.2阻止事件冒泡和捕捉例如，阻止div3之后的事件冒泡，把div3的綁定事件改為：functionD3(){ if(event&&event.stopPropagation){//W3C標(biāo)準(zhǔn)阻止冒泡機(jī)制

event.stopPropagation(); } alert("執(zhí)行D3函數(shù)");};10.6事件捕捉與事件冒泡10.6.3取消默認(rèn)事件例如，如果存在一個鏈接，寫在body中：<ahref="/"id="test">百度</a>可以使用以下代碼來阻止該鏈接的默認(rèn)行為：vara=document.getElementById("test");a.onclick=function(e){if(e.preventDefault){e.preventDefault();

溫馨提示

  • 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

提交評論