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参数保存状态或导航信息

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 事件流 IE和Netscape开发团队提出了完全相反的两种事件流的概念,事件冒泡流和事件捕获流。 事件冒泡 事件由...
    exialym阅读 998评论 0 9
  • 13.1 事件流 “DOM2级事件”规定事件流包括3个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。事件捕获表示...
    Elevens_regret阅读 462评论 0 0
  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 1,663评论 0 0
  • Web 浏览器中可能发生的事件有很多类型。如前所述,不同的事件类型具有不同的信息,而 DOM3 级事件规定了以下几...
    More_5897阅读 974评论 1 0
  • 我们吃这样的米,阳光森林内部用米 十六世纪以前碳石岩米又称石草,作为一种药用植物在本草纲目里面有详细记载,现代作为...
    幸福种子澜澜阅读 894评论 0 0