JavaScript常用事件

169 阅读2分钟

JavaScript常用事件

鼠标事件

事件名称具体描述简单描述
onclick鼠标点击事件,当鼠标左键点击时候会触发。点击
ondbclick当鼠标双击时候会触发,并有一个时间间隔,但不能太大。双击
onmousedown鼠标按下事件,当鼠标左中右键按下的时候触发按着
onmouseup鼠标抬起事件,当鼠标左中右键抬起时候触发抬起
onmousemove鼠标移动事件,当鼠标移动到目标元素上就会触发
onmouseover鼠标移入事件,当鼠标移入到目标元素上就会触发移入
onmouseout鼠标移出事件,当鼠标从目标元素上移开的时候就会触发移出
onmouseenter鼠标移入事件,当鼠标移入到元素身上就会触发移入
onmouseleave鼠标移出事件,当鼠标从元素身上移出的时候触发移出

注:onmouseover / onmouseout 与 onmouseenter / onmouseleave区别

onmouseover / onmouseout 事件,目标元素如果有子级元素的话,它会把事件传递给子集元素

onmouseenter / onmouseleave 事件,目标元素如果有子集元素,事件不会被传递给子集元素

键盘事件

事件名称具体描述简单描述
onkeydown当键盘按下去的时候会触发,如果键盘没有抬起来,那这个事件会一直触发。按下
onkeyup当键盘按钮抬起来的时候触发。抬起
onkeypress当键盘按下数字键或字母键可以触发,功能键除外(上下左右、ctrl、shift、alt)。按键

焦点事件

事件名称具体描述简单描述
onfocus当有焦点的元素获取到焦点时候触发(用tab键也会触发这个事件)触焦
onblur当有焦点的元素失去焦点时候触发失焦

注:支持onfocus的对象

button、checkbox、fileUpload、layer、frame、password、radio、reset、select、submit、text、textarea、window。

触摸事件

事件名称具体描述简单描述
touchstart手指放到屏幕上时触发
touchmove手指在屏幕上滑动式触发
touchend手指离开屏幕时触发
touchcancel系统取消touch事件的时候触发

每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches

滚轮事件

onmousewheel(IE/Chrom):  滚轮方向(event.wheelDelta)上:120;下:-120

提交事件

onsubmit

更改表单元素Select触发事件

onMouseOver onFocus onChange onClick