广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

本文给大家总结了JS DOM的常用事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

click单击dblclick双击contextmenu右击mouseover鼠标悬停在元素上， 建议用 mouseenter 代替mouseout鼠标离开元素，建议用 mouseleave 代替mouseenter鼠标悬停在元素上mouseleave鼠标离开元素mousedown鼠标按键按下mouseup    鼠标按键抬起mousemove鼠标移动

keydown键盘按键按下keyup键盘按键抬起keypress键盘按键按下，用于可输入字符按键

1. 哪些元素可以监听键盘事件？

① document

② 可以获取焦点的元素（表单控件，尤其是可输入的元素）

2. keydown 和 keypress 的区别？

① keydown 所有的按键按下都可以触发，无法区分大小写按键。

② keypress 只有可输入字符按键按下才可以触发，可以区分大小写按键。

3. 如何获取按下的是哪个按键？

使用 event 对象中的属性：

evnet.keyCode 获取按键对应的 ascii 值

event.which 同 keyCode

event.key 获取按键的字符值。

load页面中所有的一切加载完毕就会触发，可以监听到window上或者body元素DOMContentLoaded页面中所有的元素加载完毕就会触发，可以监听在window或者document上， 只能使用 addEventListener 监听事件beforeunload当关闭网页的时候触发

load 事件与 DOMContentLoaded 事件的区别：

① load 事件是页面中所有的一切加载完毕才能触发，包括元素以及外部资源。

② DOMContentLoaded 事件是页面中所有的元素加载完毕就可以触发，不包括外部资源。

submit当表单提交的时候触发，该事件监听到form元素reset当表单重置的时候触发，该事件监听到form元素focus当表单控件获取焦点的时候触发blur当表控件单失去焦点的时候触发select输入框或文本域中的内容被选中change对于输入框，内容改变且失去焦点才会触发；适合用于select

load图片文件下载完毕error图片加载失败

resize监听到 window上，视口大小发生改变scroll监听到window或者是具有滚动体的元素，页面或元素中的内容发生滚动就触发。

给事件的回调函数设置第一个形参，就可以获取 event 对象。

不同类型的事件获取的 Event 对象类型也不同。

offsetX / offsetY获取鼠标在目标元素上的坐标位置clientX / clientY获取鼠标在视口上的坐标位置pageX / pageY获取鼠标在页面上的坐标位置screenX / screenY       获取鼠标在屏幕上的坐标位置button获取按的是哪个鼠标按键， 0：左键； 1:中间键; 2:右键

keyCode获取按键对应的编码值which同 keyCodekey获取按键对应的字符值

type获取事件名timeStamp获取触发事件时距离打开页面时的毫秒数target获取目标元素stopPropagation()阻止事件冒泡preventDefault()阻止浏览器默认行为

在事件的回调函数中执行 event.stopPropagation()，就可以阻止冒泡。

超链接点击跳转表单的提交和重置右键弹出系统菜单等...

在事件的回调函数中调用 event.preventDefault() 即可阻止默认行为。

注意： 如果使用第二种方式监听事件，在回调函数中 return false 同样可以阻止默认行为。

事件监听到祖先元素上，判断目标元素，如果目标元素满足条件，就执行相关操作。

事件委托的优势：

对于给大量的元素监听相同的事件，使用事件委托比遍历挨个监听效率更好。

利用事件委托可以让新增的元素也可以响应事件。

相关推荐：【JavaScript视频教程】

以上就是JavaScript DOM 常用事件最新总结！的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~