原生js深刻理解系列（三）--- 事件冒泡的分析以及如何防止事件冒泡

時間 2019-12-07

原文原文鏈接

1、總結:由下面源碼總結以下javascript

2、源碼 // 源碼---starthtml

<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>

<ul id="source">
<li>北京空氣質量：90</li>
<li>上海空氣質量：70</li>
<li>天津空氣質量：80</li>
<li>廣州空氣質量：50</li>
<li>深圳空氣質量：40</li>
<li>福州空氣質量：32</li>
<li>成都空氣質量：90</li>
</ul>

<ul id="resort">


</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]}空氣質量：${item[1]}`
apppendDom.appendChild(liDom)
})
//較優方法多js字符串處理只操做一次dom賦值
/*data.forEach((item,index) => {
newstring +=`<li>第${sortIndex[index]}名：${item[0]}空氣質量：${item[1]}</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>java