大家好，我是IT修真院深圳分院第01期學(xué)員字支，一枚正直純潔善良的web程序員凤藏。
今天給大家分享一下，修真院官網(wǎng)js任務(wù)4堕伪，深度思考中的知識(shí)點(diǎn)——如何阻止事件冒泡和默認(rèn)事件揖庄？。
一欠雌、背景介紹
講之前先說(shuō)說(shuō)什么是事件
Event
在觸發(fā)DOM上某個(gè)事件時(shí)蹄梢，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象包含著所有事件有關(guān)的信息（導(dǎo)致事件的元素富俄、事件的類型禁炒、與特定事件相關(guān)的信息）
所有瀏覽器都支持Event對(duì)象，但支持方式不同
IE中的事件對(duì)象：window.event
/*封裝Event對(duì)象
IE：window.event
*/
function getEvent(event){
return event?event:window.event;
}
二蛙酪、知識(shí)剖析
2.1冒泡機(jī)制
下面這個(gè)圖片大家應(yīng)該心領(lǐng)神會(huì)吧齐苛，氣泡從水底開始往上升，由深到淺桂塞，升到最上面凹蜂。在上升的過(guò)程中，氣泡會(huì)經(jīng)過(guò)不同深度層次的水。
相對(duì)應(yīng)地：這個(gè)氣泡就相當(dāng)于我們這里的事件玛痊，而水則相當(dāng)于我們的整個(gè)dom樹汰瘫；事件從dom樹的底層 層層往上傳遞，直至傳遞到dom的根節(jié)點(diǎn)擂煞。
2.1.1簡(jiǎn)單案例分析?
下面通過(guò)一個(gè)簡(jiǎn)單的例案例來(lái)闡述冒泡原理:
2.2默認(rèn)事件
瀏覽器的一些默認(rèn)的事件混弥。例如：點(diǎn)擊超鏈接跳轉(zhuǎn)，點(diǎn)擊右鍵會(huì)彈出菜單对省，滑動(dòng)滾輪控制滾動(dòng)條
三蝗拿、常見問題
如何阻止事件冒泡和默認(rèn)事件?
四、解決方案
1.IE瀏覽器下面的緩存問題：
在IE瀏覽器下面使用get請(qǐng)求時(shí)蒿涎，如果第一次請(qǐng)求了數(shù)據(jù)之后IE會(huì)自動(dòng)緩存數(shù)據(jù)哀托，如果下一次再發(fā)送同樣的請(qǐng)求的時(shí)候?yàn)g覽器會(huì)自動(dòng)先去找緩存顯示出來(lái)，所以如果請(qǐng)求的數(shù)據(jù)有變化的時(shí)候劳秋，這里是看不到變化的仓手。
解決辦法：
xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);
就是在請(qǐng)求的后面 加上_dc=...讓url變成唯一，或者是玻淑，改成post請(qǐng)求嗽冒。
2.跨域問題：
這是我們目前見到的最多的，也是最熟悉的一個(gè)問題补履。本地上面直接采用Nginx跨域?qū)崿F(xiàn)添坊。在服務(wù)器上的話，也可以用Nginx干像。注意Nginx跨域可以同時(shí)配置多個(gè)接口的帅腌，就是多寫幾個(gè)location就好了驰弄，然后location后面帶的參數(shù)不一樣就可以了麻汰。
3.Ajax亂碼問題
亂碼問題雖然我們目前遇到的不多，但是也屬于比較常見的一個(gè)問題了戚篙。出現(xiàn)的主要原因就是編碼不一致導(dǎo)致的五鲫。如果出現(xiàn)亂碼問題了，首先檢查一下meta聲明的charset要和請(qǐng)求的頁(yè)面返回的charset一致岔擂。response.charset="gb2312 or utf-8"
4.使用post提交的時(shí)候需要設(shè)置
content-Type: application/x-www-form-urlencoded
//jQuery中
content-Type: application/x-www-form-urlencoded;charset=utf-8
//AngularJS中$http的
content-Type: application/json; charset=utf-8
//使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法位喂，否則出錯(cuò)。
xhr.open("post","xxxx.aspx",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//用原生寫時(shí)必須在open()方法之后send()方法之前調(diào)用乱灵。
5.Ajax對(duì)象屬性的大小寫問題
有些瀏覽器比如火狐塑崖，對(duì)大小寫是敏感的，if (xhr.readystate==4)這種寫法痛倚，在IE下是成立的规婆，但是在ff下就行不通了，因?yàn)镮E不區(qū)分大小寫，ff是區(qū)分大小的抒蚜。標(biāo)準(zhǔn)寫法為if (xhr.readyState==4)掘鄙，同理還有屬性responseText，responseXML嗡髓。
6.Ajax狀態(tài)0的問題
有時(shí)候在測(cè)試Ajax代碼的時(shí)候加了xhr.status==200的判斷后操漠，一直不執(zhí)行xhr.status==200的代碼，這個(gè)就需要注意了饿这。xhr.status==200是要通過(guò)服務(wù)器確認(rèn)后來(lái)返回的浊伙，在服務(wù)器頁(yè)面沒有發(fā)生錯(cuò)誤或者轉(zhuǎn)向時(shí)才返回200狀態(tài)的此狀態(tài)和你通過(guò)瀏覽器訪問頁(yè)面時(shí)服務(wù)器定義的狀態(tài)一致。這個(gè)我們提前就跟后端對(duì)接好了长捧，問題也不大吧黄。
五、編碼實(shí)戰(zhàn)
詳見視頻：
六拗慨、拓展思考
事件冒泡有什么作用？
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上奉芦，避免把事件處理器添加到多個(gè)子級(jí)元素上）赵抢，它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。讓不同的對(duì)象同時(shí)捕獲同一事件声功，并調(diào)用自己的專屬處理程序做自己的事情
七烦却、參考文獻(xiàn)
參考一：博客園
參考二：腳本之家
八、更多討論
詳見視頻先巴。
感謝大家觀看
今天的分享就到這里啦其爵，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)伸蚯、留言摩渺、拍磚~
下期預(yù)告：前端垮域問題有哪些常用的解決方式？不見不散~
你可以直接點(diǎn)擊此鏈接與我一起學(xué)習(xí)：邀請(qǐng)碼
