JointJsv2.2官方文档解读005：基本的事件监听

---

一、事件主体

cell：图形、连接线
link：连接线
element：图形
blank：空白区域

二、事件类型

我这里先介绍基本常用的事件

1.pointerdblclick双击

回调函数参数：cellView, evt, x, y
cell:pointerdblclick
link:pointerdblclick
element:pointerdblclick
blank:pointerdblclick（blank回调函数参数：evt, x, y）

2.pointerclick单击

回调函数参数：cellView, evt, x, y
cell:pointerclick
link:pointerclick
element:pointerclick
blank:pointerclick（blank回调函数参数：evt, x, y）

如果遇到pointerclick监听不到的情况，可以参考我的另一篇博客：
解决JointJsv2.2中pointerclick事件无法监听

3.contextmenu右键单击

回调函数参数：cellView, evt, x, y
cell:contextmenu
link:contextmenu
element:contextmenu
blank:contextmenu（blank回调函数参数：evt, x, y）

4.pointerdown点击按下（开始）

回调函数参数：cellView, evt, x, y
cell:pointerdown
link:pointerdown
element:pointerdown
blank:pointerdown（blank回调函数参数：evt, x, y）

5.pointerup点击抬起（结束）

回调函数参数：cellView, evt, x, y
cell:pointerup
link:pointerup
element:pointerup
blank:pointerup（blank回调函数参数：evt, x, y）（blank回调函数参数：evt, x, y）

6.mouseover指针悬停

回调函数参数：cellView, evt
cell:mouseover
link:mouseover
element:mouseover
blank:mouseover（blank回调函数参数：evt）

7.mouseout指针离开

回调函数参数：cellView, evt
cell:mouseout
link:mouseout
element:mouseout
blank:mouseout（blank回调函数参数：evt）

三、回调函数参数

1. cellView

1.1 图形对象：
cellView.model
修改图形对象属性，与新建图形块儿的时候用法一样：

cellView.model.attr('body/strokeWidth',3)

1.2 link的source和target图形对象：
cellView.sourceView
cellView.targetView

cellView.sourceView.model.attr('body/strokeWidth',3);

cellView.targetView.model.attr('body/strokeWidth',3);

1.3 图形属性：
cellView.model.attributes.attrs
包含了图形自带的属性和自定义的属性，例如自定义的id和类型

cellView.model.attr('body/strokeWidth',3)

1.4 图形类型（指以cell为事件主体时判断是Element还是Link）：
cellView.model.attributes.type
示例：

if(cellView.model.attributes.type==='standard.Rectangle'){
	// todo
}

2. evt

2.1 中断事件：
evt.stopPropagation()
调用这个函数可以避免触发子事件：
例如：
监听pointerup事件时，同时还会触发pointerclick事件

四、代码示例

我们监听的是cell, element, link这些，但是使用的是paper的on函数

// 监听cell鼠标点击事件
paper.on('cell:pointerclick', function (cellView,evt,x,y) {
	// 图形对象类型
	if(cellView.model.attributes.type==='standard.Rectangle'){
		// 自定义的属性keyvalue
        var key = cellView.model.attributes.attrs.keyvalue;
        // todo
	})
})
// 监听element鼠标悬停事件
paper.on('element:mouseover',function(cellView){
	// 实现一个高亮效果
	cellView.model.attr('body/stroke','#F56C6C');
   	cellView.model.attr('body/strokeWidth',3);
})