HTML5 Canvas Event Delegation with Konva

To get the event target with Konva, we can access the target property
of the Event object. This is particularly useful when using event delegation,
in which we can bind an event handler to a parent node, and listen to events
that occur on its children.

Instructions: Click on the star and observe that the layer event binding
correctly identifies the shape that was clicked on.

Konva Event_Delegation Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Event Delegation Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>

<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});

var layer = new Konva.Layer();

var star = new Konva.Star({
x: stage.width() / 2,
y: stage.height() / 2,
numPoints: 15,
innerRadius: 40,
outerRadius: 70,
fill: 'blue',
scale: {
x: 2,
y: 0.5,
},
name: 'my star',
});

layer.on('click', function (evt) {
// get the shape that was clicked on
var shape = evt.target;
alert('you clicked on "' + shape.name() + '"');
});

layer.add(star);

// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
Enjoying Konva? Please consider to support the project.