Js学习之事件

关于Javascript中的事件：

---

UI事件

指不一定与用户操作有关的操作

1. loading,当页面完全加载完成后触发
   用在页面加载，图片加载等
   <img src=' ' "alert('Image loaded')">
补充：
EventUtil.addHandler，视情况而定来使用DOM0级方法、DOM2级方法或IE方法来添加事件
接受3个参数：要操作的元素、事件名称和事件处理程序函数
2. unloading，当页面完全卸载后再window上触发，框架接在完成后再框架集上触发，当嵌入的内容卸载完毕后在<object>上触发
   典型就是当用户从一个页面切换到另一个页面就会触发unloading事件，需要注意的是，当页面被卸载后，所有的Dom节点都将变得不可取，所以在书写js代码的时候需要注意这一点，会报错的！
3. abort,在用户停止下载过程时，如果嵌入的内容没有加载完，就会在<object>上触发
4. error，错误时在window上触发
5. select，当选择文本框中的一行或者多行时触发
6. resize，窗口或者框架在大小该变化时在window或者框架上触发
   当浏览器的窗口被调整到一个新的高度或者宽度的时候就会触发，这是一个很常用的api，需要注意的是，Firefox只有在用户停止操作的时候才会触发事件，而其他的浏览器只要变化1像素，就会触发一次。
7. scroll，滚动带滚动条的内容时触发
   scroll事件是发生在window上的，通过相关的scrollLeft，scrollTop可以监听到其变化，在滚动时会被重复触发，可以考虑节流来控制事件触发的频率
   这些事件大多用在表单上。

焦点事件

焦点事件在页面获得或者是去焦点的时候触发
通过document.hasFocus()和document.activeElement属性可以知晓用户在页面上的行踪。

1. blur 元素失去焦点的时候触发，不会冒泡，且所有浏览器支持
2. focus 元素获得焦点时触发，不会冒泡，所有浏览器支持
3. focusin 与focus的唯一区别在于会发生冒泡，浏览器支持性稍微差些

当焦点从页面中的元素转义时，会一次发生下面的事件

1. focuseout 在失去焦点的元素上触发
2. focusin 在获得焦点的元素中触发
3. blur 在失去焦点的元素上触发
4. DOMFocusOut 在失去焦点的元素上触发
5. focus在获得焦点的元素上触发
6. DOMFocusIn在获得焦点的元素上触发

鼠标与滚轮事件

1. click 鼠标单击触发，通常为左键

2. dbclick 鼠标双击触发，通常为左键

3. mousedown 按下任意鼠标按键触发

4. mouseenter 鼠标光标首次从外部移入到目标位置，不冒泡，且移入到后代元素上无效

5. mouseleave 鼠标光标移出目标元素时触发，不冒泡，移动到后代元素上无效

6. mousemove 在目标内会被一直触发

7. mouseout 移入另一个元素时触发，不论是无关元素还是子元素

8. mouseover 指针在元素外部，首次移动到另一个元素边界之内时就触发

9. mouseup 释放鼠标按钮时触发
   鼠标的一次click是由mousedown和mouseup组合而成的
   滚轮事件：mousewheel，这个事件跟踪鼠标滚轮

10. clientX，clientY，表示时间发生时，鼠标指针在饰扣中的水平和垂直坐标，也就是相对于当前显示窗口

11. pageX,pageY 是页面位置坐标，也就是相对于页面来说，区别于视口

12. screenX，screenY，表示相对电脑屏幕左上角的位置信息。

13. 鼠标事件也可以配合键盘按键来触发事件shift，ctrl，alt，meta等等
    注：对于mouseover，mouseout存在相关元素的概念，relatedTarget

鼠标滚轮事件：
滚轮滚动的方向是通过数据的正负来体现的

键盘和文本事件

1. keydown 按下任意键触发，如果不松手，会持续触发
2. keypress 按下键盘上的字符时触发，按住不放，会重复触发
3. keyup 用户释放键盘按键的时候触发
   keydown和keypress的区别在于按键的类型，如果是非字符键，就会触发keydown