事件类型

111 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第9天,点击查看活动详情

鼠标事件

鼠标点击

每当用户用鼠标点击时就会触发点击事件

  1. 单击事件 (clcik) 每一次点击鼠标都会触发这个事件
  2. 双击事件 (doubleclcik) 当用户快速点击两次时触发,当然不管你有多快,这两次点击也会触发单击事件
  3. 右击事件 (contextclick) 用户右键点击时才会触发的事件,一般网站都会是默认的自定义右键菜单。我们也可以通过一些方法来改变这默认的自定义右击菜单。比如:百度地图,他就不是寻常的浏览器默认菜单。

鼠标按下松开移动

每当用户用操作鼠标时就会触发鼠标按下、鼠标移动、鼠标松开事件

  1. 按下事件 (mousedown) 每一次按下鼠标都会触发这个事件
  2. 移动事件 (mousemove) 当用户鼠标在某个容器内移动时触发,不管你有多快,他都会触发鼠标移动事件
  3. 松开事件 (mouseup) 用户结束按下操作松开鼠标时会触发的事件。

这三个事件作用在一起可以实现拖动元素的效果

鼠标移入移出

鼠标移动移出有两种方法:
第一种: 如果有一个子元素在他里面,当鼠标移入移出经过子元素时,不会触发这个事件

  • 移入 mouseenter
  • 移出 mouseleave

第二种: 如果有一个子元素在他里面,当鼠标移入移出经过子元素时,会触发这个事件

  • 移入 mouseeover
  • 移出 mouseout

键盘事件

键盘事件多用于window,document和input输入框等

  • 键盘按下 keydown
  • 键盘松开 keyup

可以用来判断输入的值是否为回车键

表单事件

  1. focus 获取焦点时触发
  2. blur 失去焦点时触发
  3. change 对比获取焦点时和失去焦点时,如果有改变就会触发事件
  4. input 在发生改变时会触发的事件
  5. submit 点击提交按钮触发,前提是表单中有提交按钮,默认会刷新页面,我们可以将其阻止
  6. reset 点击重置按钮时触发

submit和reset两个事件的事件源于其他四个事件不一样,他们两个呢,是对表单进行操作