js的事件种类整理

鼠标事件 (继承MouseEvent接口)
鼠标事件 描述
click 按下鼠标时触发
dblclick 双击鼠标时触发
mousedown 按下鼠标键时触发
mouseup 释放按下鼠标键触发
mousemove 鼠标在节点内部移动触发,持续移动,事件会持续触发(会有性能问题)
mouseenter 鼠标进入节点触发,进入子节点不会触发。(在节点内只会触发一次)
mouseover 鼠标进入节点触发,进入子节点会再一次触发
mouseout 鼠标离开节点触发,离开父节点也会触发
mouseleave 鼠标离开节点触发,离开父节点不会触发
contextmenu 鼠标右键(右键菜单)前触发,或按下右键菜单时触发
wheel 滚动鼠标的滚轮时触发,继承WheelEvent接口

触发顺序: mouseDown > mouseup > click > dblclick

mouseover 和 mouseenter 的共同点:鼠标进入一个节点触发

区别:

  • mouseover 会在子节点触发多次
  • mouseenter 只触发一次

mouseout 和 mouseleave 共同点: 鼠标离开一个节点时触发
区别:

  • 在父元素内部离开一个子元素时,mouseout事件会触发。
  • 在父元素内部离开一个子元素时,mouseout事件不会触发。

键盘事件 (继承KeyboardEvent接口)

键盘事件 描述
keydown 按下键盘时触发
keypress 按下有值的键触发,(无值键Ctrl、Alt、Shift、Meta ) ,会先出发keydown
keyup 松开键盘时触发

用户一直按键不松开:

1.keydown
2.keypress
3.keydown
4.keypress
5. ...(重复上面过程)
6.keyup

进度事件 (继承ProgressEvent接口)

描述资源加载的进度。主要由AJAX、<img>、<audio>、<video>、<style>、<link> 等外部资源的加载触发。

进度事件 描述
abort 外部资源中止加载时(比如用户取消)触发,发生错误导致中止不会触发。
error 由于错误导致外部资源无法加载时触发(error特性,不会冒泡,不会触发父元素的error时间监听函数)
load 外部资源加载成功时触发
loadstart 外部资源开始加载时触发
loadend 外部资源停止加载时触发,发生顺序在error、abort、load等事件的后面。
progress 外部资源加载过程中不断触发
timeout 加载超时时触发

注意:
按照习惯js脚本一般都放置在页面底部,有时候图片加载会在脚本运行之前就完成,因此有可能load和error事件的监听函数不会执行。
解决办法:使用complete属性先判断一下是否加载完成。

function loaded(){
  // ...
}
if(image.complete){
  loaded();
}else{
  image.addEventListener('load',loaded)
}

DOM元素节点没有提供是否加载错误的属性,所以error事件的监听函数最好放到<img>元素的HTML代码中,这样可以保证发生加载错误时百分之百会执行。

<img src="/wrong/url" onerror="this.style.display='none';"/>

loadend事件的监听函数,可以用来取代abort事件、load事件、error事件的监听函数,因为总是在这些事件之后发生。

拖拉事件 (继承DragEvent接口)

DragEvent接口又继承了MouseEvent接口和Event接口。

拖拉的对象有好几种,包括元素节点、图片、链接、选中的文字等等。
元素节点是默认不可以拖拽的,可以设置属性draggable="true"改为可拖拽
元素被拖拽时,会持续触发拖拉事件

拖拉事件 描述
drag 在拖拽节点上持续触发(间隔几百毫秒)
dragstart 开始拖拉时,在被拖拉的节点上触发
dragend 拖拉结束时,在被拖拉的节点上触发
dragenter 拖拉进入当前节点时,在当前节点上触发一次
dragover 拖拉进入当前节点时,在当前节点上持续触发(间隔几百毫秒)
dragleave 拖拉离开当前节点范围内,在当前节点上触发
drop 释放目标节点时,在目标节点上触发。

推荐阅读更多精彩内容

  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 690评论 0 3
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 977评论 0 1
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 1,911评论 1 10
  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 953评论 0 0
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 2,504评论 0 19