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

最新推荐文章于 2021-06-28 22:25:11 发布

埃尔斯（aiers）

最新推荐文章于 2021-06-28 22:25:11 发布

阅读量260

点赞数

本文链接：https://blog.csdn.net/weixin_40766882/article/details/88949224

版权

开发十年，就只剩下这套架构体系了！ >>>

一、总结:由下面源码总结如下

二、源码 // 源码---start

<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>