JS基础9，2024年最新字节跳动8年老Web前端面试官经验谈

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

---

1. 只要触发事件，系统生成创建事件对象Event

2. 获取事件对象，在事件处理函数中获取

3. 更改事件对象名

事件处理函数定义形参，触发时Event自动赋值给形参

4. 事件兼容IE写法

e=e||window.event

//获取点击时鼠标X轴坐标

事件对象属性

---

鼠标（光标）位置属性

| 属性 | 含义 |

| :-: | :-- |

| clientX clientY | x,y位置（相对于浏览器窗口） |

| offsetX offsetY | x,y位置（相对于自身窗口） |

| pageX pageY | x,y位置（相对于页面） |

鼠标事件

| 属性 | 含义 |

| :-: | :-- |

| mouseover | 鼠标移入 |

| mouseout | 鼠标移出 |

| mousemove | 鼠标移动 |

| click | 鼠标点击 |

| dbckick | 鼠标双击 |

| contextmenu | 右键点击事件 |

| mousedown | 按下事件 |

| mouseup | 抬起事件 |

盒子随鼠标移动

---

1. 盒子开始隐藏display: none;

2. 鼠标移入时盒子显示minbox.style.display = 'block'

3. 获得鼠标坐标e.clientX和e.clientX

4. 判定盒子不要超出边界

5. minbox.style.top赋值

6. 鼠标移出时再次隐藏minbox.style.display = 'none'

表单事件

---

| 属性 | 含义 |

| :-: | :-- |

| submit | 提交事件 |

| change | 内容转变事件 |

| input | 表单输入事件 |

| select | 选中文本时触发 |

| invalid | 表单元素的值不满足时触发 |

| reset | 表单重置时触发 |

注：阻止表单默认提交行为e.preventfalult()

键盘事件

---

| 属性 | 含义 |

| :-: | :-- |

| keyup | 键盘抬起事件 |

| keydown | 键盘按下事件 |

| keypress | 键盘按下再抬起事件 |

注：键盘响应顺序

1. 对于字符键，keydown=>keypress=>keyup

2. 对于非字符键，keydown=>keyup

注：键盘键值获取var keyCode=e.keyCode||e.which