JS中元素的常用事件 以及 鼠标、键盘事件对象信息

JS里面的所有 原生事件 没有大写字母

一、 鼠标事件

1. click 左键单击
   一个单击 会触发一个 down + 一个 up
   事件源.onclick = function () { 执行函数 }

2. dblclick 左键双击
   一个 左键双击 会触发 两个左键单击

3. contextmenu 右键双击

4. mousewheel 滚轮滚动

5. mousedown 鼠标按下

6. mouseup 鼠标抬起

7. mousemove 鼠标移动

8. mouseover 鼠标移入

9. mouseout 鼠标移出

10. mouseenter 鼠标移入

11. mouseleave 鼠标移出

mouseover、mouseout 和 mouseenter、mouseleave的区别
不论 鼠标指针 穿过 被选元素或其子元素 ，都会触发 mouseover 事件。 对应mouseout
只有在 鼠标指针 穿过 被选元素时 ，才会触发 mouseenter 事件。 对应mouseleave

二、 键盘事件

不是所有元素都能触发
表单事件（有选中效果），document，window

1. keydown 键盘按下
   只要你键盘上的按键按下就可以触发
   中文输入法下，也会触发
2. keyup 键盘抬起
3. keypress 键盘按下
   必须要 准确的嵌入到文本框 里面的内容才会触发
   出现在文本框里面的内容必须要和你按下的按键一致
   就比如，文本框出现一二三，你按下yiersan这样是不一致的； 也就是说要文本框也要出现yiersan才可以

三、 浏览器事件

1. load 页面加载完毕
2. scroll 页面发生滚动
3. resize 窗口尺寸发生变化
4. offline 网络断开
5. online 网络恢复
6. hashchange 当hash 值改变的时候触发

四、 表单事件

表单事件绑定给 表单元素 和 form 标签

1. change 表单内容改变
   当表单 失焦的时候 ，如果和 聚焦的时候 不一样叫做改变
2. input 表单输入事件
   只要你在 表单内部输入内容 就会触发
3. focus 表单聚焦事件 （选中）
4. blur 表单失焦事件（未选中）
5. submit 表单提交事件
   事件是绑定给 form 标签使用的
   当你点击 form 里面的 submir 的时候触发
6. reset 表单重置事件
   事件是绑定给 form 标签使用的
   当你点击 reset 按钮的才能触发

五、 拖拽事件

一般元素想触发拖拽行为，要给元素加上一个属性
draggable = " true "

想要两个元素完成一个完整的拖拽，必须具备两个要素
        1. 拖拽元素
        2. 目标元素

1. dragstart 拖拽开始
   绑定在 拖拽元素 身上
2. drag 拖拽移动
   绑定给 拖拽元素
3. dragend 拖拽结束
   绑定给 拖拽元素
4. dragenter 拖拽进入目标元素
   绑定给 目标元素
   光标 进入 目标元素 触发
5. dragleave 拖拽离开目标元素
   绑定给 目标元素
   光标 离开 目标元素
6. dragover 拖拽元素在目标元素里面移动
   绑定给 目标元素
7. drop 拖拽元素在目标元素内放手
   绑定给 目标元素
   必须要再 dragover 事件里面阻止默认行为

六、 触摸事件(移动端)

只能在移动端使用

1. touchstart 触摸开始
2. touchmove 触摸移动
3. touchend 触摸结束

七、 其他事件

1. transitionend 过度结束
   当你 有过渡属性 的时候
   过度结束 触发，过渡 几个属性 触发几次
2. selectstart 开始选择
   当你想在页面中框选文档的时候触发
3. visibilitychange 窗口隐藏和显示
   只能绑定给 document

八、 补充----鼠标事件的事件对象信息

1. 按下的按键

事件对象中有一个叫做 button 的属性
他表示你 按下的是哪一个按键
0 -> 左键
1 -> 滚轮键
2 -> 右键

2. 光标的坐标（重点）

任何鼠标事件都好用

1. clientX 和 clientY
   光标距离 可视化窗口左上角 的位置
2. pageX 和 pageY
   光标距离 文档流左上角 的位置
3. offsetX 和 offsetY
   光标距离 元素左上角 的位置
   元素：光标触发事件的元素（不是事件源）
   扩展：如果你不想按照里面光标触发元素的左上角计算坐标
           就想按照 事件源 来计算坐标
           css样式 pointer-event: none;

九、 补充----键盘事件的事件对象信息

1. 按下的是哪一个按键

1-1. 事件对象里面有一个 key 的属性
        表示你按下的那个按钮
        特性: IE 低版本不支持
1-2. 事件对象里面有一个叫做 keyCode 的属性
        表示你按下的是哪一个按键, 但是是以编码的形式给你
        特性: FireFox < 20 的版本不支持
        在火狐低版本使用 which 属性
        兼容: var code = e.keyCode || e.which

2. 你按下的是不是组合按键

2-1. altKey
2-2. ctrlKey
2-3. shiftKey
2-4. metaKey

四个属性的值都是布尔值
        altKey 表示 alt 键
        ctrlKey 表示 ctrl 键
        shiftKey 表示 shift 键
        metaKey 表示 win 键
        IE 没有不支持
当你按下一个按键的时候
        如果这四个的某一个的值是 true, 表示你同时也按下了这个按键