JavaScript 事件类型（键盘事件，鼠标事件

}

document.onmouseup = function() {

appendText(“onmouseup”);

}

document.onclick = function() {

appendText(“onclick”);

}

document.ondblclick = function() {

appendText(“ondblclick”);

}

document.oncontextmenu = function() {

appendText(“oncontextmenu”);

}

document.onmouseover = function() {

appendText(“onmouseover”);

}

document.onmouseout = function() {

appendText(“onmouseout”);

}

document.onmousemove = function() {

appendText(“mousemove”);

}

触发时的参数为 MouseEvent 对象类型，MouseEvent对象中包含下面比较有用的属性：

• type: 事件类型，如 mosemove 或者mousedown

• button：整型，触发鼠标事件时按下的按钮编号

• buttons：整型，触发鼠标事件时弹起来的按钮编号

• clientX：鼠标指针在 DOM 内容区的X坐标

• clientY：鼠标指针在 DOM 内容区的Y坐标

• offsetX：鼠标指针相对父节点填充边缘的X坐标

• offsetY: 鼠标指针相对父节点填充边缘的Y坐标

• screenX: 鼠标指针在全局屏幕的X坐标

• screenY: 鼠标指针在全局屏幕的Y坐标

• pageX: 鼠标指针在整个DOM内容（包括分页）的X坐标

• pageY: 鼠标指针在整个DOM内容（包括分页）的Y坐标

• altKey: 布尔值，表示此时的alt键是否也按下

• ctrKey: 布尔值，表示此时的alt键是否也按下

• shiftKey: 布尔值，表示此时的shift键是否也按下

• metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下

示例:点击鼠标右键，弹出div

document.oncontextmenu = function(){

return false

}; //禁止鼠标右键菜单显示

var res = document.getElementById(‘box’); //找到id为box的div

document.body.onmouseup = function(e){ //在body里点击触发事件

if(e.button===2){ //如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）

console.log(e); //将传进去的参数打印出来

console.log(e.offsetY); //打印出鼠标点击的Y轴坐标

console.log(e.offsetX); //打印出鼠标点击的X轴坐标

res.style.top = e.offsetY+‘px’; //鼠标点击时给div定位Y轴

res.style.left = e.offsetX+‘px’; //鼠标点击时给div定位X轴

res.style.display = ‘block’; //显示div盒子

}else{

res.style.display = ‘none’; //否则不显示div盒子

}

}

焦点事件

不是所有元素都有焦点事件，只有可交互性的元素才有，比如表单元素，a标签。页面中只能有一个元素有焦点，一个聚焦，另一个就失焦，默认在document。

form.txt1.focus(); // 让元素获得焦点，该方法不会触发onfocus（）事件。

form.txt1.οnfοcus=function(){

console.log(1);

} // 元素获得焦点时会触发该事件

form.txt1.οnblur=function(){

console.log(2);

}　　//元素失去焦点时触发该事件

form.btn.οnclick=function(){

form.txt1.select();

} //选中输入框中的所有文字

form.btn.οnclick=function(){

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
  和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！