knockout.js mouseover and mouseout

Current example shows you how to work with events e.g. mouseover and mouseout using knockout.js

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<div id="myDiv" data-bind="event: { mouseenter: showdiv(), mouseout: hidediv() }">Search</div>
<span id="mySpan" data-bind="text: action"></span>

CSS

div{
    width: 100px;
    height: 100px;
    border: 1px solid #222;
    background-color: lime;
}
span{
    margin: 20px;
}
.redColor{
    background-color: red;
}

JavaScript

var viewModel = function(data) {
   var self = this;
   self.action = ko.observable("Hidden");
   self.showdiv = function () {
            $('#myDiv').addClass('redColor');
        };
   self.hidediv = function () {
            $('#myDiv').removeClass('redColor');           
        };
};

ko.applyBindings(new viewModel());