JS高级学习笔记（5）之 事件

参考：https://www.cnblogs.com/lhyxq/tag/Javascript/

 

UI事件

当用户与页面元素交互时触发

• DOMActivate：表示元素已经被用户操作激活，该事件在DOM3规范中被废弃，因此不建议使用

• load：当页面完全加载后在window对象上触发，图像加载完毕在 img 标签触发，嵌入内容加载完毕在 object 元素触发

• unload：页面完全卸载后在 window 对象触发，框架卸载完成在框架集上触发，嵌入内容卸载完成在 object 元素触发

• abort：在用户停止下载时，若嵌入内容没有加载完则在 object 元素触发

• error：JS发生错误时在 window 上触发，无法加载图像在 img 元素触发 ，无法加载嵌入内容在 object 内容触发

• select：用户选中文本框（input、texterea）的一个或多个字符时触发

• resize：当窗口或框架的大小发生变化时触发

• scroll：用户滚动带滚动条的内容时触发

 

焦点事件

当元素失去或获得焦点时触发

焦点事件会在页面元素获得或者失去焦点时触发，利用焦点事件和 document.hasFocus() 方法配合使用

以及 document.activeElement 属性配合可以知晓用户在页面上的行踪

 

焦点事件有以下6种：

• blur：在元素失去焦点时触发，该事件不会冒泡

• DOMFocusIn：在元素获得焦点时触发，该事件与HTML事件 focus等价 ，但是该事件会冒泡，DOM3级规范废弃了该事件。选择了 focusin 作为实现

• DOMFocusOut：元素失去焦点触发，也会冒泡。DOM3级废弃该事件选择了 focusout 作为实现

• focus：元素获得焦点触发，该事件不会冒泡

• focusin：与focus等价支持冒泡

• focusout：与blur等价支持冒泡

 

所以当焦点从一个元素移到另一个元素会依次触发以下事件：

1. focusout 失去焦点的元素触发

2. focusin 获得焦点的元素触发

3. blur 失去焦点的元素触发

4. DOMFocusOut 失去焦点元素触发

5. focus 获得焦点元素触发

6. DOMFocusIn 获得焦点元素触发

要确定浏览器是否支持以上事件：

var isSupported = document.implementation.hasFeature("FocusEvent","3.0");

 

鼠标与滚轮事件

鼠标事件是web开发中最常用的一类事件，毕竟鼠标是最主要的定位设备

• click：在用户单击主鼠标按钮（一般为鼠标左键）或者按下回车时触发，这一点对确保易访问性十分重要，这意味着 onclick 事件处理程序既可以通过键盘执行也可以通过鼠标执行

• dbclick：在用户双击主鼠标按钮时触发（鼠标左键）。从技术上说该事件并不是DOM2级规范所支持的，但是由于浏览器对其的广泛实现在DOM3级规范中将其纳入标准

• mousedown：用户按下任意鼠标按钮触发，不能通过键盘触发

• mouseenter：鼠标光标从元素外部移入元素内部时触发，该事件不冒泡，并且在光标从元素移入元素子元素时不会触发

• mouseleave：光标从元素上方移出元素范围时触发，该事件不冒泡，移入后代元素不会触发

• mousemove：鼠标指针在元素内部移动时重复触发，不能通过键盘触发该事件

• mouseout：鼠标位于元素上方，此时将鼠标移至另一个元素触发，其子元素也会触发，不能通过键盘触发该事件

• mouseover：鼠标位于元素外部，首次移入元素范围内触发，其子元素也会触发，不能通过键盘触发该事件

• mouseup：用户释放鼠标按钮时触发，不能通过键盘触发

 

 

• 文本事件 当在文档中输入文本时触发

• 键盘事件 当用户通过键盘在页面执行操作时触发

• 合成事件 当为IME（输入法编辑器）输入字符时触发

• 变动事件 当底层DOM结构发生变化时触发

 

键盘事件

• keydown：按键时触发，按住不放会重复触发

• keypress：按下键盘上的字符键触发，按住不放重复触发（按下ESC键也会触发）

• keyup：释放按键触发

 

表单事件

• blur：当前字段失去焦点时触发

• change：对于 input、textarea 元素，当其失去焦点且value值被改变时触发，对于select元素改变选项时触发

• focus：当前字段获得焦点时触发

转载于:https://www.cnblogs.com/houfee/p/10469092.html