大家好，我是前端西瓜哥，我们今天来看看 Konva 的事件系统 。
Konva 的图形同时支持 PC 端和移动端事件， 包括 DOM 元素类似的事件，如 Mouse、Touch、Pointer 事件。
此外还有一些特别的事件：
- tap：轻敲，属于移动端的 Touch 类事件；
- dbltap：连续轻敲两下；
- dragstart / dragmove / dragend：拖拽开始/移动/结束事件。Konva 支持给一个图形设置为可拖拽，然后可以通过鼠标移动，该行为对应的时间就是这些；
- transformstart / transform / transformend：Konva 也支持给一个图形添加形变特性，可以拖拽控制点做图形缩放和旋转操作，这些操作对应这三个事件。
添加事件
绑定事件使用 on(evtStr, handler) 方法。很多类都有这个方法，是继承自 Konva.Node 类的。
参数说明：
- evtStr：字符串形式的事件名；
- handler：事件响应函数，该函数会拿到一个 Konve 封装的事件对象；
返回值为调用者本身，这样就可以做链式调用。
我们创建一个矩形：
代码语言：javascript复制const rect = new Konva.Rect({
x: 30,
y: 30,
width: 300,
height: 300,
fill: "red"
});
给这个矩形绑定点击事件的写法为：
代码语言：javascript复制rect.on("click", (event) => {
console.log(event);
});
event 对象
handler 获取的 event 对象属性有：
- type：事件名，比如
"click"、"dragmove"； - target：事件发生的具体目标元素；
- currentTarget：图形所在顶部 stage 对象；
- evt：对应的原生事件对象。Konva 的事件对象是基于原生事件对象的封装，比如 drag 相关的对应原生的 Mouse 事件对象；
- pointerId：其实就是对应原生 Pointer 事件的 pointerId，用于 Pointer 事件的标识。
事件流
Konva 支持事件冒泡，但不支持事件捕获。
子节点的事件会冒泡到父节点。
我们在 stage 节点下，加入 rect 图形，然后对它们设置事件监听。
代码语言：javascript复制stage.on("click", (event) => {
console.log("stage click");
});
rect.on("click", (event) => {
console.log("rect click");
});
我们点击 rect 图形，输出结果为：
代码语言：javascript复制rect click
stage click
是冒泡的逻辑：先执行 rect 的事件，然后再执行 stage 事件。
阻止冒泡事件
可以将 event.cancelBubble 设置为 true 来阻止冒泡：
rect.on("click", (event) => {
event.cancelBubble = true;
console.log("rect click");
});
其他
fire(evtName)：模拟特定事件的发生，这种情况下无法拿到原生事件对象；off(evtName[, handler])：如果只有 evtName，移除该事件下所有监听器；如果同时有 evtName 和 handler，会移除 evtName 中的监听器集合中指定的 handler；
结尾
本文简单讲解了 Konva 的事件系统和用法，赶紧练习去吧。
我是前端西瓜哥，欢迎关注我，学习更多知识。
