Introduction
In my previous article I told you about If and Ifnot Binding Using Knockout.
In today's article I explain mouseover and mouseout event binding using Knockout.
Step 1
First, you need to add the external Knockout js file into your application, you can either download it from the internet or can download my application available at the start of this article in ZIP Format and then can use the file attached with this ZIP file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
Now we can work on our application. First we will work on the ViewModel for this you need to add a Script tag under the Body Section and then add this code:
<script type="text/javascript">
function x() {
this.goodMorning= ko.observable(false),
this.overMe= function () {
this.goodMorning(true);
},
this.overOut= function () {
this.goodMorning(false);
}
};
ko.applyBindings(new x());
</script>
As always, I first created a function "x()", then I created an Observable named "goodMorning". This Observable is made false. That means that wherever it'll be applied, that element will not work until a specified condition is not fulfilled.
After that I created two functions, in the first function goodMorning is made True and in the other it's made false. Which means that the first function will allow the goodMorning Observable to work and the second function will again stop it from working.
At the end Binding is applied to the x().
Step 3
Our work on ViewModel is now complete, so we can move forward to the view part of the application.
Write this code in the view of the application:
<div>
<div>
<button data-bind="event: { mouseover: overMe, mouseout: overOut }">Mouse Over Here </button>
</div>
<div data-bind="visible: goodMorning">
Hey! Good Morning....
</div>
</div>
In the second Div I took a button with binding done in this manner:
<button data-bind="event: { mouseover: overMe, mouseout: overOut }">Mouse Over Here </button>
In this button, binding is done using "mouseover" and "mouseout" event binding, which means that when the mouse hovers over the button then "overMe" will be called and when the mouse moves out of the button then "overout" will be called.
After that I had again taken a div that is bound in this manner:
<div data-bind="visible: goodMorning">
This means that this Div will be shown only on the Mouse Hover over the button and will be hidden when the mouse moves out of the button.
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<button data-bind="event: { mouseover: overMe, mouseout: overOut }">Mouse Over Here </button>
</div>
<div data-bind="visible: goodMorning">
Hey! Good Morning....
</div>
</div>
<script type="text/javascript">
function x() {
this.goodMorning= ko.observable(false),
this.overMe= function () {
this.goodMorning(true);
},
this.overOut= function () {
this.goodMorning(false);
}
};
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Now your application is ready to run so debug it to run it.
Output
On running the application you will get output like this:
![mouseover and out binding1.jpg]()
But as you hover the mouse over the button the output will be like this:
![mouseover and out binding3.jpg]()