事件 ------ 2020-08-15

1、事件的定义:

(1)事件:事件就是一件事情或者一个行为(对于元素来说,它的很多事件
都是天生自带的),只要我们去操作这个元素都会触发这些行为。

(2)事件绑定:给元素天生自带的事件行为绑定方法,当事件触发,会把对
应的方法执行。

2、元素天生自带的事件总结:

(1)鼠标事件:

click:点击事件。(PC端是点击,移动端的点击代表单机,移动端使用click
会有300ms延迟问题)。

dblclick:双击事件。

mouseover:鼠标经过;

mouseout:鼠标移除;

mouseenter:鼠标进入;

mouseleave:鼠标离开;

mousedown:鼠标按下(鼠标左右键都起作用,按下即触发,click是按下抬起
才触发,先把mouseup、mousedown先触发,再触发click事件);

mouseup:鼠标抬起;

mousewheel:滚轮滚动事件;

(2)键盘事件:

keydown:鼠标按下;

keyup:鼠标抬起;

keypress:和keydown类似,一点区别在于keydown返回的是键盘码,
keypress返回的是ASCII码;

input:由于PC端有实体物理键盘,可以监听到键盘的按下抬起,但是
移动端是虚拟键盘,所以keyup/keydown在大部分手机上都没有,我们使用
input事件统一代替他们;

(3)表单常用事件:

focus:获取焦点;
blur:失去焦点;
change:内容改变;

(4)其他常用事件:

load:加载完成;
unload:
beforeunload:
scroll:页面滚动触发;
resize:浏览器窗口大小改变触发;

(5)移动端手指事件:

[单手指操作]:
touchstart:手指按下;
touchmove:手指移动;
touchend:手指离开;
touchcancle:因为以外导致手指操作取消;

[多手指操作]:
gesturestart:手指按下;
gesturechange:手指改变;
gestureend:手指离开;

(6)H5中的audio/video事件:

[canpaly]:可以播放,播放过程中可能会出现由于资源没有加载完成导致的卡顿;
[canplaythrough]:资源加载完成,可以正常无障碍播放;
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容