mouse event

HTML

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/805914/kinetic.js"></script>
<div id="canvasDiv"></div>
<div class='log'></div>

JavaScript

window.stage = new Kinetic.Stage({
    container: 'canvasDiv',
    width: 400,
    height: 400,
    draggable: false,
    pixelRatio : 1
});

window.layer = new Kinetic.Layer();    

var group = new Kinetic.Group({
    x: 100,
    y: 100
});

var border = new Kinetic.Rect({
    width: 8,
    height: 8,
    stroke: 'grey',
    strokeWidth: 1,
    fill: 'red',
    drawHitFunc: function(context) {
        context.beginPath();
        context.rect(-3, -3, 14, 14);
        context.closePath();
        context.fillStrokeShape(this);
    },
});
group.add(border);
group.add(new Kinetic.Rect({
    x: 3,
    y: 3,
    width: 2,
    height: 2,
    fill: 'white'
}));

border.on('mouseover', function(e) {
    console.log('mouseover');
});

border.on('mouseout', function(e) {
    console.log('mouseout');
});

window.layer.add(group);
window.stage.add(window.layer);