事件冒泡的分析以及如何防止事件冒泡

一、源码 // 源码---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

事件冒泡的分析以及如何防止事件冒泡

猜你喜欢