事件冒泡的分析以及如何防止事件冒泡
阿新 • • 發佈：2018-11-27
一、原始碼 // 原始碼---start
| <!DOCTYPE> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>IFE JavaScript Task 01</title> | |
| </head> | |
| <body> | |
| <ul id="source"> | |
| <li>北京空氣質量：<b>90</b></li> | |
| <li>上海空氣質量：<b>70</b></li> | |
| <li>天津空氣質量：<b>80</b></li> | |
| <li>廣州空氣質量：<b>50</b></li> | |
| <li>深圳空氣質量：<b>40</b></li> | |
| <li>福州空氣質量：<b>32</b></li> | |
| <li>成都空氣質量：<b>90</b></li> | |
| </ul> | |
| <ul id="resort"> | |
| <!-- | |
| <li>第一名：北京空氣質量：<b>90</b></li> | |
| <li>第二名：北京空氣質量：<b>90</b></li> | |
| <li>第三名：北京空氣質量：<b>90</b></li> | |
| --> | |
| </ul> | |
| <button id="sort-btn">排序</button> | |
| <script type="text/javascript"> | |
| /** | |
| * getData方法 | |
| * 讀取id為source的列表，獲取其中城市名字及城市對應的空氣質量 | |
| * 返回一個數組，格式見函式中示例 | |
| * data = [ | |
| ["北京", 90], | |
| ["北京", 90] | |
| …… | |
| ] | |
| */ | |
| function getData() { | |
| /* | |
| coding here | |
| */ | |
| const targetDom = document.getElementById('source') | |
| // document.getElementsByTagName | |
| // document.getElementsByClassName | |
| // document.querySelectorAll,這些方法獲取到的結果是個集合，並不是陣列，而map,forEach這些方法只有在陣列原型裡面才有，所以可以先將它們轉化Array.from | |
| let targetLiDom = Array.from(targetDom.getElementsByTagName('li')); // 轉化為陣列 | |
| console.log(targetLiDom) | |
| let data = targetLiDom.map((itemDom) => { | |
| let item = []; | |
| // innerText會忽略標籤只取標籤裡的內容，注意子標籤也會被忽略 | |
| let middle = itemDom.innerText; | |
| //注意console。log的變化 | |
| console.log(middle,1) | |
| let middleArr = middle.split('：'); | |
| console.log(middleArr,2) | |
| let arrOne = middleArr[0].replace('空氣質量', ''); | |
| item.push(arrOne); | |
| let arrTwo = middleArr[1] | |
| /*let arrTwo = itemDom.querySelector('b').innerText;*/ | |
| item.push(arrTwo) | |
| return item | |
| }) | |
| console.log(data,3) | |
| return data; | |
| } | |
| /** | |
| * sortAqiData | |
| * 按空氣質量對data進行從小到大的排序 | |
| * 返回一個排序後的陣列 | |
| */ | |
| function sortAqiData(data) { | |
| // let targetLiDom = Array.from(targetDom.getElementsByTagName('li')); // 轉化為陣列 | |
| /*targetLiDom.filter(val=>{ | |
| val.querySelector('b').innerText | |
| })*/ | |
| let newArr=data.sort((a,b)=>{ | |
| return a[1]-b[1] //取的是true | |
| }) //這裡是淺拷貝原陣列data也會發生改變 | |
| console.log(newArr,111111) | |
| render(newArr) | |
| } | |
| /** | |
| * render | |
| * 將排好序的城市及空氣質量指數，輸出顯示到id位resort的列表中 | |
| * 格式見ul中的註釋的部分 | |
| */ | |
| function render(data) { | |
| const apppendDom = document.getElementById('resort'); | |
| const sortIndex = ['一','二','三','四','伍','六','七','八','九','十'] | |
| let newstring='' | |
| data.forEach((item,index) => { | |
| let liDom = document.createElement('li') | |
| liDom.innerHTML =`第${sortIndex[index]}名：${item[0]}空氣質量：<b>${item[1]}</b>` | |
| apppendDom.appendChild(liDom) | |
| }) | |
| //較優方法多js字串處理只操作一次dom賦值 | |
| /*data.forEach((item,index) => { | |
| newstring +=`<li>第${sortIndex[index]}名：${item[0]}空氣質量：<b>${item[1]}</b></li>` | |
| }) | |
| apppendDom.innerHTML = newstring*/ | |
| } | |
| function btnHandle() { | |
| var aqiData = getData(); | |
| aqiData = sortAqiData(aqiData); | |
| render(aqiData); | |
| } | |
| function init() { | |
| // 在這下面給sort-btn繫結一個點選事件，點選時觸發btnHandle函式 | |
| let targetDom = document.getElementById('sort-btn'); | |
| // event=event?event:window.event; | |
| // event.stopPropagation(); | |
| // Event物件： | |
| // 在IE瀏覽器中，event物件是window物件的一個屬性。 | |
| if(window.event){ | |
| console.log(window.event,4) | |
| alert(4) | |
| targetDom.attchEvent('click', function(e){ | |
| btnHandle(); | |
| e.cancleBubble() | |
| }) | |
| }else{ | |
| targetDom.addEventListener('click', function(e){ | |
| btnHandle(); | |
| e.stopPropagation() | |
| }) | |
| } | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> |
// 原始碼---end
二、總結
三、github連結：https://github.com/Mrliu1/newife/tree/master/blogThree