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绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!