对象事件
鼠标事件
event对象
-
XY有关的都是鼠标坐标
- 除了getBoundingClientRect() 返回元素的大小及其相对于视口的位置
- left top一般都是元素坐标
-
clientX/clientY
- 距离可视区域左上角
-
layerX/layerY
- 如果目标对象是定位方式，那么值与offset值相似
- 如果目标对象是非定位方式，取父容器的左上角位置，如果父容器未定位，继续向上取
-
offsetX/offsetY
- 相对事件目标对象的左上角位置
-
movementX/movementY
- 仅用于mousemove事件，这个值是鼠标移动时相对上次获取坐标的距离
-
pageX/pageY
- 相对页面顶端左上角位置
-
screenX/screenY
- 光标相对于该屏幕的水平位置（和页面无关）
-
x/y
- 和clientX/clientY相同
按下键点击鼠标时，变为true
- altKey: false
- ctrlKey: false
- metaKey: false
- shiftKey: false
针对mousedown事件的属性，判断按下的键
- button: buttons: which:
- 左键 0 0 1
- 中键 1 4 2
- 右键 2 2 3
MouseEvent
-
click
- 点击左键
-
dblclick
- 双击左键
-
mousedown
- 按下键
-
mouseup
-
松开
-
拓：mousedown,mouseup,click顺序
- 按下键（mousedown），松开（mouseup），点击（click ）
-
-
-
mousemove
- 移动
-
mouseout
-
滑出
- 有冒泡功能 可以收到鼠标滑入滑出子元素的冒泡事件
-
-
mouseover
-
滑过
- 有冒泡功能 可以收到鼠标滑入滑出子元素的冒泡事件
-
-
mouseenter
-
进入
- 仅对侦听的对象起到事件接收作用
-
-
mouseleave
-
离开
- 仅对侦听的对象起到事件接收作用
-
-
contextmenu
- 右键菜单
阻止默认事件
1、表单事件中的submit 和reset 使用阻止默认事件可以取消提交和重置
2、当使用contextmenu事件，取消鼠标右键菜单
3、当针对元素拖拽时，元素内有文本，文本会被选中
4、图片拖拽时产生禁止拖拽图标
this
指向
-
函数中
- this ==window
-
对象自身
- var obj={ console.log(this)}
-
在事件函数中等于事件侦听的对象
-
document.addEventListener(“click”,clickHandler);function clickHandlere(){ console.log(this); }
-
注：
- 1、事件函数中的this会覆盖普通对象中函数this的指向
- 2、事件函数中，针对e.type事件类型所有对应的事件侦听对象才是this
-
焦距事件
blur
- 失去焦距
focus
- 汇聚焦距
e.relatedTarget
- 上次汇聚焦距的元素
汇聚焦距的方式有，点击，tab切换
所有表单元素（例：文本框），超链接
input事件
input
-
e.data: "o" 输入的内容
-
e.inputType: "insertText" 输入的类型 insertCompositionText
- 包括插入文本，删除文本，插入输入法文本，剪切粘贴文本等等
-
e.isComposing: true 是否是输入法文本
XMind: ZEN - Trial Version
