mouseEvent，foucs事件和input事件

在mouseEvent之前还有几个小事件

5.submit，reset：

只针对表单form，表单里的东西不针对
这里面有个属性e.preventDefault取消事件默认行为。

6.resize和scroll：

针对窗口调整大小。也就是针对window

首先了解一个概念em，和rem：
1em
就是父元素的字体大小
1rem
根节点html标签的fontSize大小

scroll
当滚动条滚动时，触发事件
resize

MouseEvent事件

click
单击
dblclick
双击
mouseenter
鼠标进入
mouseleave
鼠标离开
mousedown
鼠标按下
mouseup
鼠标释放
mouseover
鼠标滑过
mouseout
鼠标滑出
mousemove
鼠标移动
contextmenu
右键菜单

当使用mousedown，mouseup时，判断按下的是哪个鼠标键可以看控制台的尖号下

点击时是否有辅助按键
e.altKey false
e.ctrlKey: false
e.shiftKey: false
e.metaKey: false

关于Mouse事件点击时的坐标

当使用mousedown
mouseup 时判断按下的是那个鼠标键
button
buttons
which
左
0
1
1
中
1
4
2
右
2
2
3
当鼠标点击时就会有鼠标点击的位置，所有鼠标点击的位置都是X，Y
所有DOM的位置都是left和top
客户坐标
e.clientX: 39
e.clientY: 36
层级坐标
如果定位时和e.offsetX,e.offsetY相同，如果没有定位，相对页面左上角位置
e.layerX: 39
e.layerY: 36
移动偏移坐标
只有mousemove有用
相对上次mousemove所对应位置的移动差
e.movementX: 0
-3
向左
3向右
e.movementY: 0
-3 向上
3向下
偏移坐标
相对e.target 目标元素的左上角定位
e.offsetX: 31
e.offsetY: 28
页面坐标
相对页面左上角的位置坐标
e.pageX: 39
e.pageY: 36
屏幕坐标
相对显示屏幕的坐标
e.screenX: 39
e.screenY: 107
坐标 等同于clientX,clientY
e.x: 39
e.y: 36

mouseenter
和 mouseleave 仅针对侦听元素的进入和离开
mouseover和mouseout 针对侦听元素和侦听元素的后代元素都可以收到进入和离开的事件
如果在做若干元素的经过和离开，需要使用到事件委托，可以使用mouseover和mouseout

foucs事件和input事件

是针对表单的事件，包括input，（Nodlist型列表，可以直接中数组的方法）

foucs：聚焦，input聚焦，（让某个文本框聚焦） 不冒泡，form表单不可以事件委托侦听
blur：失焦，不冒泡，form表单不可以事件委托侦听
focusin和focusout 冒泡，form表单可以事件委托侦听。 focus事件可以针对所有表单元素，及超链接。 input事件

针对input事件

，可以冒泡； 其中，e.data:“当前输入的字符”，e.isComosing 是否开启输入法，e.inputType 是否输入
这个事件是用来检测的，一般用在正则表达式，
节流的概念：用setTimeout进行规定时间，用于input输入框的节流。检验正则表达式。

拓展

关于e.preventDefault()取消默认事件的应用场景

1、提交表单submit和重置表单reset
事件使用可以阻止提交和重置
2、禁止拖拽选择文本可以针对禁止的元素mousedown事件增加 取消，
如果页面整个不想被选中，可以设置document的mousedown事件取消事件默认行为
3、图片拖拽时会产生禁止拖拽图标，可以在mousedown时使用取消事件默认行为，
不再允许拖拽图片和不再出现产生禁止拖拽图标
4、右键菜单contextmenu事件，可以取消右键菜单显示效果

最后

以上就是刻苦魔镜为你收集整理的mouseEvent，foucs事件和input事件的全部内容，希望文章能够帮你解决mouseEvent，foucs事件和input事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。