Event binding

To catch and handle all these different events, Knockout has the event binding. We are going to use it to show and hide the debug panel when the mouse goes over and out of text, with the help of the following code:

1. The first update of the index.html template is as follows. Replace the debug div with this new HTML:

   <div data-bind="event: {
     mouseover:showDebug,
     mouseout:hideDebug
   }">
     <h3 style="cursor:pointer">
       Place the mouse over to display debug
     </h3>
     <pre class="well well-lg" data-bind="visible:debug, toJSON: $root"></pre>
   </div>

   This code says that when we set the mouse over the div element, we will show the debug panel. Initially, only the h3 tag content will be displayed.

2. When we set the mouse over the h3 tag, we will update the debug variable value and the debug panel will be displayed. To achieve this, we need to update our view-model with this code:

   var debug = ko.observable(false);
   
   var showDebug = function () {
     debug...