手打基础丸 🧆 => 精选基础知识，经过多道工序精心制作而成，口感鲜嫩多汁。一口咬下，香气四溢，加上传统前端风味，令人回味无穷...... 助力食用者厚积薄发，夯实根基进阶上层。
什么是点击穿透，如何解决？
上层元素的点击事件还未完成，下层元素点击事件就被触发，导致用户异常体验。
解决方法：
根本原理就是阻止事件传递，以下列两种方式
1、使用css的pointer-events属性使元素不接收鼠标事件。
2、js中的event.preventDefalut()方法 阻止元素的默认事件
前端路由？
前端路由是实现前端页面在内部实现页面跳转，可以不通过后端跳转，避免频繁的服务器请求，适用于单页面应用。
但是前端路由不利于SEO，控制逻辑和状态管理需要额外关注
JS为什设计为单线程？
为了避免多线程的复杂性，降低开发难度，满足页面交互对高响应速度的需求
JS判断包含emoji的字符串长度？
emoji在字符串length方法会判定为两个字符，实际计算长度应该算一个，故不能直接使用length获取长度
function strCode(str) {
let legth = 0
for(let i = 0 ; i < str.length; i++){
const c = str.charCodeAt(i)
if(c >= 0xd800 && c <= 0xdbff){
i++
}
length++
}
return length
}
JS事件流？
指的是浏览器中所有事件的传递和处理过程。事件流分为三个阶段为事件捕获、到达目标、事件冒泡
捕获：事件从最外层元素到最内层元素传递触发直到目标元素，如果每个元素都有事件处理程序那么经过的元素的事件都会被调用
冒泡：事件从目标元素向外层传递触发，经过的元素的事件都会被调用。可以用来实现事件委托
addEventListner的第三参数可以控制事件触发的阶段，false为冒泡阶段触发，true为捕获阶段触发
// 捕获阶段触发
xxx.addEventListener('click', () => {
console.log('xxx');
}, true)
e.stopPropagation()方法可以阻止事件冒泡
