JavaScript 事件类型

JavaScript 事件类型

定义:

区别

      当用户进行页面操作时,会有各种行为产生,也就是所谓的交互(指的是用户操作和页面给予的反应),比如鼠标点击,滑过,按下

鼠标类

事件	触发条件
click	单击
dblclick	双击
contextmenu	右击
mousedown	按下
mouseup	抬起
mousemove	移动
mouseover	穿过–对应mouseout
mouseout	离开–对应mouseover
mouseenter	进入–对应mouseleave
mouseleave	离开–对应mouseenter

关于mouseover和mouseenter的区别

键盘类

事件	触发条件
keydown	键盘按下
keyup	键盘抬起
keypress	键盘字符键

表单类

事件	触发条件
input	输入框输入
change	改变
submit	表单提交

焦点类

事件	触发条件
focus	获取焦点
blur	失去焦点

Window

事件	触发条件
scroll	滚动事件
load	加载事件
resize	视口尺寸改变

mouseover和mouseenter的区别

冒泡与不冒泡的区别:

首先样式:

JS部分

事件触发顺序

总结

mouseover
       事件会带有事件冒泡 - - - - 大致概括就是 : 每次鼠标移入一个子元素中就会重新触发over事件(先执行out再重新执行over - - - - 先出后进)
注意:如果两个子元素有层叠关系,则同理每次离开和进入另一个子元素都会触发over和out事件(冒泡原理)

mouseenter
       事件不带有事件冒泡 - - - - 只会根据事件本身的元素来触发(子元素不影响事件触发)

---------未完待续