Event

阅读时间约 4 分钟

通用事件、Node 事件、Edge 事件及 Canvas 事件回调的参数请参考 Behavior API

通用事件

事件名称 描述
click 单击鼠标左键或者按下回车键时触发
dblclick 双击鼠标左键时触发
mouseenter 鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发
mousemove 鼠标在元素内部移到时不断触发,不能通过键盘触发
mouseout 鼠标移出目标元素后触发
mouseover 鼠标移入目标元素上方,鼠标移到其后代元素上时会触发
mouseleave 鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发
mousedown 鼠标按钮被按下(左键或者右键)时触发,不能通过键盘触发
mouseup 鼠标按钮被释放弹起时触发,不能通过键盘触发
contextmenu 用户右击鼠标时触发并打开上下文菜单,见 Demo
dragstart 当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
drag 当拖拽元素在拖动过程中时触发的事件,此事件作用于被拖拽元素上
dragend 当拖拽完成后触发的事件,此事件作用在被拖曳元素上
dragenter 当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
dragleave 当拖曳元素离开目标元素的时候触发的事件,此事件作用在目标元素上
drop 被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
keydown 按下键盘键触发该事件
keyup 释放键盘键触发该事件
touchstart 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
touchmove 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用 preventDefault() 事件可以阻止滚动。
touchend 当手指从屏幕上离开的时候触发

Node事件

事件名称 描述
node:click 鼠标左键单击节点时触发
node:dblclick 鼠标双击左键节点时触发
node:mouseenter 鼠标移入节点时触发
node:mousemove 鼠标在节点内部移到时不断触发,不能通过键盘触发
node:mouseout 鼠标移出节点后触发
node:mouseover 鼠标移入节点上方时触发
node:mouseleave 鼠标移出节点时触发
node:mousedown 鼠标按钮在节点上按下(左键或者右键)时触发,不能通过键盘触发
node:mouseup 节点上按下的鼠标按钮被释放弹起时触发,不能通过键盘触发
node:contextmenu 用户在节点上右击鼠标时触发并打开右键菜单,见 Demo
node:dragstart 当节点开始被拖拽的时候触发的事件,此事件作用在被拖曳节点上
node:drag 当节点在拖动过程中时触发的事件,此事件作用于被拖拽节点上
node:dragend 当拖拽完成后触发的事件,此事件作用在被拖曳节点上
node:dragenter 当拖曳节点进入目标元素的时候触发的事件,此事件作用在目标元素上
node:dragleave 当拖曳节点离开目标元素的时候触发的事件,此事件作用在目标元素上
node:drop 被拖拽的节点在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上

Edge事件

事件名称 描述
edge:click 鼠标左键单击边时触发
edge:dblclick 鼠标双击左键边时触发
edge:mouseenter 鼠标移入边时触发
edge:mousemove 鼠标在边上移到时不断触发,不能通过键盘触发
edge:mouseout 鼠标移出边后触发
edge:mouseover 鼠标移入边上方时触发
edge:mouseleave 鼠标移出边时触发
edge:mousedown 鼠标按钮在边上按下(左键或者右键)时触发,不能通过键盘触发
edge:mouseup 边上按下的鼠标按钮被释放弹起时触发,不能通过键盘触发
edge:contextmenu 用户在边上右击鼠标时触发并打开右键菜单,见 Demo

Canvas事件

事件名称 描述
canvas:click 鼠标左键单击画布时触发
canvas:dblclick 鼠标双击左键画布时触发
canvas:mouseenter 鼠标移入画布时触发
canvas:mousemove 鼠标在画布内部移到时不断触发,不能通过键盘触发
canvas:mouseout 鼠标移出画布后触发
canvas:mouseover 鼠标移入画布上方时触发
canvas:mouseleave 鼠标移出画布时触发
canvas:mousedown 鼠标按钮在画布上按下(左键或者右键)时触发,不能通过键盘触发
canvas:mouseup 画布上按下的鼠标按钮被释放弹起时触发,不能通过键盘触发
canvas:contextmenu 用户在画布上右击鼠标时触发并打开右键菜单,见 Demo
canvas:dragstart 当画布开始被拖拽的时候触发的事件,此事件作用在被拖曳画布上
canvas:drag 当画布在拖动过程中时触发的事件,此事件作用于被拖拽画布上
canvas:dragend 当拖拽完成后触发的事件,此事件作用在被拖曳画布上
canvas:dragenter 当拖曳画布进入目标元素的时候触发的事件,此事件作用在目标元素上
canvas:dragleave 当拖曳画布离开目标元素的时候触发的事件,此事件作用在目标元素上

时机监听

用于监听图的某方法调用前后的时机。

事件名称 描述
beforeadditem 调用 add / addItem 方法之前触发
afteradditem 调用 add / addItem 方法之后触发
beforeremoveitem 调用 remove / removeItem 方法之前触发
afterremoveitem 调用 remove / removeItem 方法之后触发
beforeupdateitem 调用 update / updateItem 方法之前触发
afterupdateitem 调用 update / updateItem 方法之后触发
beforeitemvisibilitychange 调用 showItem / hideItem 方法之前触发
afteritemvisibilitychange 调用 showItem / hideItem 方法之后触发
beforeitemstatechange 调用 setItemState 方法之前触发
afteritemstatechange 调用 setItemState 方法之后触发
beforeitemrefresh 调用 refreshItem 方法之前触发
afteritemrefresh 调用 refreshItem 方法之后触发
beforeitemstatesclear 调用 clearItemStates 方法之前触发
afteritemstatesclear 调用 clearItemStates 方法之后触发
beforelayout 布局前触发。调用 render 时会进行布局,因此 render 时会触发。或用户主动调用图的 layout 时触发。
afterlayout 布局完成后触发。调用 render 时会进行布局,因此 render 时布局完成后会触发。或用户主动调用图的 layout 时布局完成后触发。

不同自定义事件的回调参数不同,下面针对各个自定义事件的回调参数进行说明。

beforeadditem

名称 类型 描述
type String 当前添加的类型
model Object item 数据模型

afteradditem

名称 类型 描述
item Item 已经添加的 item 实例
model Object item 数据模型

beforeremoveitem / afterremoveitem

名称 类型 描述
item Item 要删除的 item 实例

beforeupdateitem / afterupdateitem

名称 类型 描述
item Item 要更新的 item 实例
model Object item 数据模型

beforeitemvisibilitychange / afteritemvisibilitychange

名称 类型 描述
item Item 当前操作的 item 实例
visible Boolean 是否可见,true 为可见,false 为不可见

beforeitemstatechange / afteritemstatechange

名称 类型 描述
item Item 当前操作的 item 实例
state String 状态
enalbed Boolean 状态是否可用,true 可用,false 不可用

beforeitemstatesclear / afteritemstatesclear

名称 类型 描述
item Item 当前操作的 item 实例
states Array / String 需要批量清除的状态

beforeitemrefresh / afteritemrefresh

名称 类型 描述
item Item 当前操作的 item 实例