js中常用DOM事件总结

1. event对象
   属性：
   target： 事件的实际目标
   currentTarget： 事件处理程序绑定的元素
   type： 事件的类型，如‘click’

方法:
preventDefault(): 取消事件的默认行为
stopPropagation(): 取消事件进一步捕获或冒泡

2.UI事件
load: 页面完全加载后在window上触发，也可在图像加载后在img上触发
unload： 页面完全卸载后在window上触发，页面上的对象不存在，不可操作DOM节点
resize: 浏览器窗口大小改变时在window触发，可能频繁触发，不可执行大量计算
scroll: 页面滚动时在documentElement || body触发，可以访问body元素的scrollTop和scrollLeft属性监控变化

3.焦点事件
blur: 元素失去焦点时触发，事件不会冒泡
foucs: 元素获得焦点时触发，事件不会冒泡

focusin: 元素获得焦点时触发，事件冒泡
focusout: 元素失去焦点时触发，事件冒泡

4.鼠标和滚轮事件
click: 点击鼠标或按下回车键触发，易访问
mousedown: 按下鼠标触发
mouseup: 释放鼠标触发

mouseenter: 鼠标移入元素内部触发，事件不会冒泡
mouseleave: 鼠标移出元素触发，事件不会冒泡

mouseover: 鼠标移入元素内部触发，事件冒泡
mouseout: 鼠标移出元素触发，事件冒泡

mousewheel: 通过滚轮与页面交互时触发

5.键盘与文本事件
keydown: 按下任意按键时触发，按下不动时重复触发
keyup: 松开任意按键时触发，在文本框变化后触发，可以用于自动切换焦点
keypress: 按下字符键时触发，在文本框变化之前触发，可通过阻止默认行为，来对按键操作进行屏蔽

6.HTML5事件
contextmenu: 显示上下文菜单之前触发，可通过阻止默认行为，自定义上下文菜单
beforeunload: 页面卸载前触发，可以提示用户是否离开当前页面
hashchange: URL参数列表或hash部分发生变化时触发，ajax中要通过URL参数保存状态或导航信息

作者：星月西
链接：https://www.jianshu.com/p/3fdf7a8b9244
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。