Edit in JSFiddle

var viewModel = function () {
    var self = this;
    self.detailsEnabled = ko.observable(false);
    self.enableDetails = function () {
        this.detailsEnabled(true);
    };
    self.disableDetails = function () {
        this.detailsEnabled(false);
    };
};
ko.applyBindings(new viewModel(), document.getElementById("Demo1"));

<h1>演示 KnockOut event绑定</h1>
<hr />
<ul>
  <li  class="Point">
    1、<b  class="PointTitle">event绑定的<span class="KeyWord">基本用法</span></b><br />
        <ul class="PointDesc">
            <li>可以将任意元素的任意事件与js函数进行绑定</li>
            <li>一次可以绑定多个事件</li>
            <li>事件名称全部小写，如mouseover</li>
        </ul>
        <div  class="PointDemo" id="Demo1">
         <div>
            <div style="width:150px;height:50px; background-color:Green;" data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
                鼠标移入到这里
            </div>
            <div  style="width:150px;height:50px; background-color:#2cadad;" data-bind="visible: detailsEnabled">
                这里是隐藏内容
            </div>
        </div>
 
        </div>
        <div class="PSFrame">
        绑定的时候传入一个对象{}.对象的属性名就是事件名称，对象的属性值就是要bind到的处理函数。<br />
        </div>
        <hr />
    </li>
</ul>
<hr />

/*Demo�ļ���ʽ*/
body
{
    background-color: #e3e5d4;
}
/*  ֪ʶ��    */
.Point
{
    margin: 20px,0,0,0;
}
/*  ֪ʶ�����    */
.PointTitle
{
    color:#0d8d0d;
}
/*  �ؼ���    */
.KeyWord
{
    color:Red;
}
/*  ֪ʶ������    */
.PointDesc
{
    font-family: Arial;
    font-size: 15px;
    color:#09acb8;
}
.PointDesc li
{
    margin: 10px,0,0,0;
}
/*  ֪ʶ��Demo���    */
.PointDemo
{
    border-style:double; 
    border-color:#dcd559;
    min-height:100px;
    font-family: Corbel;
    font-size: 20px;
    color: #00174f;
}
/*  ��Ҫ������ʾ����Ϣ���    */
.PSFrame
{
    border-style: dashed; 
    border-color:#78e6ef;
    font-family: Corbel;
    font-size: 20px;
    font-style:italic;
    color: #b86c00;
}
/*  ������ʾ    */
.error {
    color:Red;
    
}
/*  **********************************************************    */
/*��Ҫǿ������ʽ*/
.Notice
{
    font-weight: bold;
    font-family:Bodoni MT Black;
    color: #cd0707;
}

/*  **********************************************************    */
/*�������ʽ*/
input[type="text"]
{
    min-width:250px;
}
select
{
    min-width:400px;
}