javascript
《精通javascript》5,6章复习(三)
想想還是把標(biāo)題改成復(fù)習(xí)好點(diǎn),因?yàn)闀械闹R(shí)點(diǎn)挺多而且細(xì),不好概括,凡是覺(jué)得重要的我都想提一提把code重新打一遍。繼續(xù)(二)的內(nèi)容,接下來(lái)該是從DOM刪除一個(gè)節(jié)點(diǎn):NodeParent.removeChild(NodeToRemove);
書中removeChild為基礎(chǔ)封裝了兩個(gè)函數(shù):
1 //從DOM中移除一個(gè)節(jié)點(diǎn) 2 function remove(elem) { 3 if(elem) 4 elem.parentNode.removeChild( elem); 5 } 6 7 //清空一個(gè)元素的所有子節(jié)點(diǎn) 8 function empty(elem) { 9 while(elem.firstChild) { 10 remove(elem.firstChild); 11 } 12 }DOM部分算是復(fù)習(xí)結(jié)束,接下來(lái)是Event部分。同樣是javascript開(kāi)發(fā)中一個(gè)很核心的東西。說(shuō)到事件這里有個(gè)重要的概念,javascript的事件分兩個(gè)階段:capturing and bubbling phase,稱為事件的捕獲和冒泡階段。
來(lái)個(gè)能說(shuō)明問(wèn)題的例子:
1 <div id="content"> 2 <ul class="links"> 3 <li> 4 <!-- 我們點(diǎn)擊了這個(gè)鏈接 --> 5 <a href="/">Home</a> 6 </li> 7 <li> 8 <a href="/about/">About</a> 9 </li> 10 </ul> 11 </div>首先是capturing phase:假設(shè)我們單擊了一個(gè)鏈接,事件的激發(fā)順序:
document的click處理事件-->body的click處理事件-->div的click處理事件,以此類推最后到達(dá)那個(gè)我們點(diǎn)擊的a,然后進(jìn)入bubbling phase,順序和capturing phase相反。
有時(shí)我們要取消事件冒泡:
function stopBubble(e) {
//如果默認(rèn)傳入了event對(duì)象,那么這是非IE瀏覽器
????? if(e && e.stopPropagation )
//因此支持W3C標(biāo)準(zhǔn)的stopPropagation()方法
?????????? e.stopPropagation();
else
??????????????? //否則我們要用IE取消事件冒泡的方式
????????????????window.event.cancelBubble = true;
}
對(duì)于瀏覽器的默認(rèn)行為我們?cè)陂_(kāi)發(fā)過(guò)程中也要注意,比如一個(gè)用戶表單,當(dāng)用戶輸入內(nèi)容,并按下提交按鈕,如果表單內(nèi)容所填有誤的話,就應(yīng)該給用戶指出錯(cuò)誤,不給予提交。阻止瀏覽器的默認(rèn)行為:
function stopDefault(e) {
//阻止默認(rèn)的瀏覽器行為(W3C)
???? if( e && e.preventDefault)?? e.preventDefault();
???? else? window.event.returnValue = false;? //IE中采用的方法
?????return false;
}
接著作者講述了些開(kāi)發(fā)網(wǎng)頁(yè)的原則,比如在去掉css和javascript的前提下,看看自己的網(wǎng)頁(yè)是否還能良好的導(dǎo)航與瀏覽,你的html標(biāo)簽是否具有良好的語(yǔ)義,css和javascript有沒(méi)有跟HTML DOM進(jìn)行分離等等..我覺(jué)得在CSS方面有本書很不錯(cuò),《超越CSS:web設(shè)計(jì)精髓》。
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/AndyWithPassion/archive/2010/06/22/professional_js_3.html
總結(jié)
以上是生活随笔為你收集整理的《精通javascript》5,6章复习(三)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 2010中国杭州电子信息博览会通讯报道
- 下一篇: javascript:jquery.hi