Dom（七） 事件类型

事件类型

事件分类

首先我们在DOM上有一个Event类，这个类包含了：load，unload，error，select，abort等事件

然后，这些父类首先会衍生出子类UIEvent，包含了：resize，scroll等

再然后，由UIEvent衍生出了FouseEvent，包含了：blur，focus，focusin，focusout等

再接着，UIEvent还衍生出了InputEvent，包含了：beforeinput，input等事件

还有，UIEvent还衍生出了KeyboardEvent，包含了：keydown，keyup等事件

还有最常用的鼠标事件，MouseEvent，包含了：click，dbclick，mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover，mouseup等事件

由MouseEvent衍生出了WheelEvent，滚轮事件：wheel

MouseEvent

mouseover和mouseenter虽然都是进入是触发，然后，还是有区别的，mouseover进入元素或其子元素时都会触发mouseover事件，而mouseenter只有进入元素本身时才会触发事件

mouseout和mouseleave同理，和mouseover和mouseenter一样的原理

属性

clientX，clentY：指的是窗口的可视区域，点击位置到浏览器左边框，浏览器上边框的记录

screenX，screenY：指的是整个屏幕的区域，点击位置到屏幕的左侧距离，到屏幕的顶部距离

ctrlKey，shiftKey，altKey，metaKey：对应的按键

button(0,1,2)：0-左键，1-中间剑，2-右键

MouseEvent顺序

从元素A上方移动，触发的顺序为：

mousemove -> mouseover -> mouseenter - >mousemove - > mouseout -> mouseleave

点击元素，触发的顺序为：

mousedown -> [mousemove]（可能鼠标有微小的移动） -> mouseup ->click

案例：鼠标拖动DIV（等我弄明白了上传）

WheelEvent

滚轮事件

WheelEvent对象

属性（都是只读属性）

delaMove：滚动的数量，比如是一行还是一屏

deltaX：水平滚动

deltaY：纵向滚动

deltaZ：纵深滚动

FouseEvent

fousin和fouse的区别在于可以冒泡，fouseout和blur的区别也在于可以冒泡

属性

relatedTarget：这个是指向失焦的元素，比如radio当点击一个radio时，另外一个就会失去焦点，那么这个属性指向的就是失去焦点的那个元素

KeyboardEvent

键盘事件

属性

key：指按下的哪个键

code：指按下键的码值

ctrlKey，shiftKey，altKey，metaKey：常用的cltrl键，shift键等

repeat：是否连续按下

CompositionEvent

辅助事件，有三个属性，分别为：compositionstart，compositionupdate，compositionend，用来检测输入法的，大致就是输入框搜索的时候要等到输入法输入结束后才对输入框内的输入进行后台查询，否则的话每次按下键盘上的键都要去和后台搜索，而且检测的是英文实际我们检测的是中文

基类Event

load，窗口加载的时候

unload，窗口关闭的时候

error，出现错误的时候执行

abort，加载的时候按下了esc键触发

Image

load

error：发生错误时，显示，可以给image加上，例如

<image onerror="xxx.jpg">

abort

UIEvent

resize：主要是当我们浏览器的窗口出现大小变换的时候触发

scorll：当页面滚动的时候触发

最后

以上就是追寻黑裤为你收集整理的Dom（七） 事件类型的全部内容，希望文章能够帮你解决Dom（七） 事件类型所遇到的程序开发问题。

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