"event" 绑定

"event 绑定"在DOM元素上添加指定的事件以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在 keypress, mouseover 和 mouseout上。

基本用法

Html代码

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        Mouse over me
    </div>
    <div data-bind="visible: detailsEnabled">
        Details
    </div>
 </div>

var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
ko.applyBindings(viewModel);

以下用法同click绑定用法相同，所以就不在描述，只给出例子。

Demo1：演示传递"当前项目"作为处理函数的一个参数

Html代码

<ul data-bind="foreach: places">
     <li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }"> </li>
</ul>
<p>You seem to be interested in: <span data-bind="text: lastInterest"> </span></p>

function MyViewModel() {
    var self = this;
	self.lastInterest = ko.observable();
	self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
	self.logMouseOver = function(place) {
	   self.lastInterest(place);
	}
}
ko.applyBindings(new MyViewModel());

Demo2：演示获取当前DOM的event对象

Html代码

<div data-bind="event: { mouseover: myFunction }">Mouse over me</div>

var viewModel = {
   myFunction: function(data, event) {
      if (event.shiftKey) {
	     alert("您按了shift键");
      } else {
	     alert("您没有按shift键");
      }
   }
};
ko.applyBindings(viewModel);

Demo3：演示添加自定义参数

<div data-bind="event: { mouseover: function(data, event) { myFunction(data, event, '我的参数1', '我的参数2') } }">
    Mouse over me
</div>

var viewModel = {
   myFunction: function(data, event,para1,para2) {

        alert('data=' + data);
        alert('event=' + event);
        alert('para1='+para1);
        alert('para2='+para2);    
   }
};
ko.applyBindings(viewModel);

Demo4：演示允许执行默认事件

默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，使用 event 语法在 input 标签上绑定一个 keypress 事件，当你输入内容的时候，浏览器只会调用你的函数而不是 添加 input 的值。 另外一个例子 "click" 绑定，在执行完自定义事件时它不会连接到 href地址。因为你的click 绑定主要就是操作你的view model，而不是连接到另外一个页面。当然，如果你想让默认的事件继续执行，你可以在你 event 的自定义函数里返回 true 。

Html代码

<input data-bind="event: { keypress : myFunction }"/>

var viewModel = {
        myFunction: function() {
            return true;//添加return true语句，否则默认无法在文本框输入内容
        }
    };
ko.applyBindings(viewModel);

Demo5：演示防止事件冒泡

默认情况下，Knockout允许event事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了 mouseover 事件，那么如果你的鼠标在该元素移动的时候两个事件都会触发的。如果需要，你可以通过额外的绑定 youreventBubble 来禁止冒泡。例如：

Html代码

<div data-bind="event: { mouseover: myDivHandler }">
   <button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
      Mouse over me
   </button>
</div>

var MyViewModel = {
    myDivHandler: function() {
	    alert("myDivHandler");
    },
    myButtonHandler: function() {
	    alert("myButtonHandler");
    }
};

ko.applyBindings(MyViewModel);