本文给大家总结了JS DOM的常用事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
1 常用事件总结
1.1 鼠标事件
click单击dblclick双击contextmenu右击mouseover鼠标悬停在元素上， 建议用 mouseenter 代替mouseout鼠标离开元素，建议用 mouseleave 代替mouseenter鼠标悬停在元素上mouseleave鼠标离开元素mousedown鼠标按键按下mouseup 鼠标按键抬起mousemove鼠标移动
1.2 键盘事件
keydown键盘按键按下keyup键盘按键抬起keypress键盘按键按下，用于可输入字符按键
1. 哪些元素可以监听键盘事件？
① document
② 可以获取焦点的元素（表单控件，尤其是可输入的元素）
2. keydown 和 keypress 的区别？
① keydown 所有的按键按下都可以触发，无法区分大小写按键。
立即学习“Java免费学习笔记（深入）”；
② keypress 只有可输入字符按键按下才可以触发，可以区分大小写按键。
3. 如何获取按下的是哪个按键？
使用 event 对象中的属性：
evnet.keyCode 获取按键对应的 ascii 值
event.which 同 keyCode
event.key 获取按键的字符值。
1.3 文档事件
load页面中所有的一切加载完毕就会触发，可以监听到window上或者body元素DOMContentLoaded页面中所有的元素加载完毕就会触发，可以监听在window或者document上， 只能使用 addEventListener 监听事件beforeunload当关闭网页的时候触发
load 事件与 DOMContentLoaded 事件的区别：
① load 事件是页面中所有的一切加载完毕才能触发，包括元素以及外部资源。
BibiGPT-哔哔终结者
B站视频总结器-一键总结 音视频内容
② DOMContentLoaded 事件是页面中所有的元素加载完毕就可以触发，不包括外部资源。
1.4 表单事件
submit当表单提交的时候触发，该事件监听到form元素reset当表单重置的时候触发，该事件监听到form元素focus当表单控件获取焦点的时候触发blur当表控件单失去焦点的时候触发select输入框或文本域中的内容被选中change对于输入框，内容改变且失去焦点才会触发；适合用于select
1.5 图片事件
load图片文件下载完毕error图片加载失败
1.6 其他事件
resize监听到 window上，视口大小发生改变scroll监听到window或者是具有滚动体的元素，页面或元素中的内容发生滚动就触发。
2 Event 对象
2.1 获取 Event 对象
给事件的回调函数设置第一个形参，就可以获取 event 对象。
不同类型的事件获取的 Event 对象类型也不同。
2.2 鼠标事件对象 MouseEvent 的属性和方法
offsetX / offsetY获取鼠标在目标元素上的坐标位置clientX / clientY获取鼠标在视口上的坐标位置pageX / pageY获取鼠标在页面上的坐标位置screenX / screenY 获取鼠标在屏幕上的坐标位置button获取按的是哪个鼠标按键， 0：左键； 1:中间键; 2:右键
2.3 键盘事件对象 KeyBorardEvent 的属性和方法
keyCode获取按键对应的编码值which同 keyCodekey获取按键对应的字符值
2.4 所有类型的事件对象都有的属性和方法
type获取事件名timeStamp获取触发事件时距离打开页面时的毫秒数target获取目标元素stopPropagation()阻止事件冒泡preventDefault()阻止浏览器默认行为
2.5 阻止事件冒泡
在事件的回调函数中执行 event.stopPropagation()，就可以阻止冒泡。
2.6 浏览器的默认行为
① 浏览器有哪些默认行为
超链接点击跳转表单的提交和重置右键弹出系统菜单等...
② 阻止浏览器默认行为
在事件的回调函数中调用 event.preventDefault() 即可阻止默认行为。
注意： 如果使用第二种方式监听事件，在回调函数中
return false同样可以阻止默认行为。
3 事件委托
事件监听到祖先元素上，判断目标元素，如果目标元素满足条件，就执行相关操作。
事件委托的优势：
对于给大量的元素监听相同的事件，使用事件委托比遍历挨个监听效率更好。
利用事件委托可以让新增的元素也可以响应事件。
相关推荐：【JavaScript视频教程】
以上就是JavaScript DOM 常用事件最新总结！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/547050.html
微信扫一扫 
支付宝扫一扫 
