KnockoutJS 3.X API 第四章之事件event绑定
目的
event绑定即为事件绑定，即当触发相关DOM事件的时候回调函数。例如keypress，mouseover或者mouseout等
例如：
Mouseoverme
源码：
<div>
<divdata-bind="event:{mouseover:enableDetails,mouseout:disableDetails}">
Mouseoverme
</div>
<divdata-bind="visible:detailsEnabled">
Details
</div>
</div>
<scripttype="text/javascript">
varviewModel={
detailsEnabled:ko.observable(false),
enableDetails:function(){
this.detailsEnabled(true);
},
disableDetails:function(){
this.detailsEnabled(false);
}
};
ko.applyBindings(viewModel);
</script>
如上述例子，当鼠标指针移入或者移出Mouseoverme时，对于detailsEnabled的值设定true或者false。进而控制Details的显示和隐藏。
和click一样，event后边所跟的格式一般为：event{mouseover:someObject.someFunction}，其中的回调函数并不一定非要是视图模型的函数，他可以时任何对象的函数。
备注1：传递一个当前项目作为参数
London
Paris
Tokyo
Youseemtobeinterestedin:
源码：
<uldata-bind="foreach:places">
<lidata-bind="text:$data,event:{mouseover:$parent.logMouseOver}"></li>
</ul>
<p>Youseemtobeinterestedin:<spandata-bind="text:lastInterest"></span></p>
<scripttype="text/javascript">
functionMyViewModel(){
varself=this;
self.lastInterest=ko.observable();
self.places=ko.observableArray(['London','Paris','Tokyo']);
//Thecurrentitemwillbepassedasthefirstparameter,soweknowwhichplacewashoveredover
self.logMouseOver=function(place){
self.lastInterest(place);
}
}
ko.applyBindings(newMyViewModel());
</script>
需要注意，如果你使用的是嵌套绑定上下文，比如foreach或者with，而需要处理的回调函数在视图模型中或者在父模型中，需要使用$parent或者$root前缀来进行绑定
与click绑定一样，给this取个别名比较好。
备注2：传递多个参数
此处请参考click绑定：
<divdata-bind="event:{mouseover:myFunction}">
Mouseoverme
</div>
<scripttype="text/javascript">
varviewModel={
myFunction:function(data,event){
if(event.shiftKey){
//dosomethingdifferentwhenuserhasshiftkeydown
}else{
//donormalaction
}
}
};
ko.applyBindings(viewModel);
</script>
封装多参数示例：
<divdata-bind="event:{mouseover:function(data,event){myFunction('param1','param2',data,event)}}">
Mouseoverme
</div>
使用bind函数示例：
<buttondata-bind="event:{mouseover:myFunction.bind($data,'param1','param2')}">
Clickme
</button>
备注3：允许默认动作
同click绑定一样，ko禁止默认动作，比如你将event的keypress事件绑定到一个Input元素上，那这个input元素输入的值将会被keypress回调占用而无法输入任何信息。解决方案很简单，就是在回调函数中返回true即可。
备注4：防止冒泡事件
如果要防止冒泡事件，可以直接在事件绑定后附加一个youreventBubble绑定。将该附加绑定设置为false则禁止冒泡事件的发生，例如：
<divdata-bind="event:{mouseover:myDivHandler}">
<buttondata-bind="event:{mouseover:myButtonHandler},mouseoverBubble:false">
Clickme
</button>
</div>
备注5：Jquery互动
以上所述是小编给大家介绍的KnockoutJS3.XAPI第四章之事件event绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！