js事件续(事件类型)

Posted 2022-05-07 nzcblogs

一、UI事件【使用时需要添加on　　eg: onload 页面加载完成事件】
load    【一张页面或一幅图像完成加载】
页面加载后触发的事件,即进入页面后

unload    【用户退出页面】
页面卸载后触发的事件,即离开页面时(firefox不支持)

select    【文本被选中】
当用户选择文本框（<input>,<textarea>）中的一个或多个字符时

resize    【窗口或框架被重新调整大小】
当浏览器窗口被调整到一个新的高度或者宽度时，会触发

scroll
当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单

二、焦点事件【使用时前面添加on　　eg: onblur  点击事件】
blur    失焦事件
focus    聚焦事件【支持冒泡】
//IE支持
focusin        与focus等价 【支持冒泡】
focusout    与blur等价 【支持冒泡】

三、鼠标事件与滚轮事件【使用时前面均需要添加on　　eg: onchange 元素改变事件】
change　　html元素发生改变
reset　　　重置按钮被点击
submit　　 确认按钮被点击
click　　　 鼠标左键点击【鼠标按下及松开】事件或按下回车键触发事件
dblclick        鼠标双击事件 相当于相继触发两次click事件
mousedown　　鼠标按钮(包括鼠标左右按键)按下事件
mouseup　　　 鼠标释放按钮事件
mousemove        鼠标在指定元素内移动事件
mousewheel       滚轮事件
mouseenter        鼠标光标从元素外部首次移动到元素范围内激发    【不支持冒泡、不支持子元素】
mouseleave       在位于元素上方的鼠标光标移动到元素范围之外时触发    【不支持冒泡、不支持子元素】
mouseover         鼠标位于元素外部，将其首次移入另一个元素边界之内时触发    【支持子元素】
mouseout           在位于元素上方的鼠标光标移入到另外一个元素中    【支持子元素】在被选元素上与mouseleave效果相同

四、键盘与文本事件【使用document调用,使用时前面也需要加on　　eg: onkeydown 键盘按下事件】
keydown        按下键盘任意键时触发，如果按住不放会重复触发此事件
keypress        按下键盘字符键时触发，如果按住不放会重复触发此事件
keyup             释放键盘上键时触发
说明：
当键盘事件发生时，event对象的keyCode属性【event.keyCode】中会包含一个代码与键盘上的特定键对应，对数字字母键，
keyCode属性的值与ASCII码中对应的小写字母和数字编码相同

五、相关元素,event特殊属性
1、客户区坐标位置    【clientX,clientY    Safari浏览器不兼容】
事件发生时，鼠标指针在视口中的水平坐标位置为clientX和垂直坐标位置clientY
    
2、页面坐标位置        【pageX,pageY    不兼容ie浏览器】
事件发生时，页面滚动时,鼠标指针在页面本身而非视口的坐标pageY = 滚动距离 + clientY
页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等

3、屏幕位置 【screenX,screenY】

4、修改键    【布尔类型】
用来判断对应的按键是否被按下shiftKey，ctrlKey，altKey，metaKey

5、鼠标按钮    【mousedown,mouseup】
该事件的event对象中包含了button属性，表示按下或释放的按钮
event.button属性值：    【0、1、2】
0表示鼠标左键按钮
1表示中间的滚动按钮
2表示鼠标右键按钮