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

最新推荐文章于 2025-07-04 16:59:10 发布

原创

最新推荐文章于 2025-07-04 16:59:10 发布 · 置顶 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #事件冒泡

本文总结了JavaScript中的事件冒泡原理，探讨了如何通过`event.stopPropagation()`和`event.preventDefault()`来防止事件冒泡。文章还介绍了高级选择器、数组操作、字符串处理及DOM操作，提供了一个实例来展示如何在原生JS中实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

任务目的

在上一任务基础上继续JavaScript的体验
接触一下JavaScript中的高级选择器
学习JavaScript中的数组对象遍历、读写、排序等操作
学习简单的字符串处理操作
任务描述
参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
将数据按照某种顺序排序后，在resort列表中按照顺序显示出来

一、总结

实现效果使用到的技术：
一、
// document.getElementsByTagName
// document.getElementsByClassName
// document.querySelectorAll,这些方法获取到的结果是个集合，并不是数组，而map,forEach这些方法只有在数组原型里面才有，所以可以先将它们转化Array.from
二、
// innerText会忽略标签只取标签里的内容，注意子标签也会被忽略
三、普通的IE浏览器的判断
// event=event?event:window.event;
// event.stopPropagation();
// Event对象：
// 在IE浏览器中，event对象是window对象的一个属性。
四、冒泡的防止与event.preventDefault() 方法阻止元素发生默认的行为。
//event.preventDefault() 方法阻止元素发生默认的行为。是jQuery的
event.preventDefault();js原生也有这个方法
该Event接口的preventDefault()方法告诉用户代理，如果该事件没有得到明确处理，则不应该像通常那样采用默认操作。
事件继续像往常一样传播，除