KnockoutJS 3.X API 第四章之事件event绑定
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了KnockoutJS 3.X API 第四章之事件event绑定，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3007字，纯文字阅读大概需要5分钟。
内容图文
目的
event绑定即为事件绑定，即当触发相关DOM事件的时候回调函数。例如keypress，mouseover或者mouseout等
例如：
Mouse over me
源码：
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
var viewModel = {
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
};
ko.applyBindings(viewModel);
</script>
如上述例子，当鼠标指针移入或者移出Mouse over me时，对于detailsEnabled的值设定true或者false。进而控制Details的显示和隐藏。
和click一样，event后边所跟的格式一般为：event { mouseover: someObject.someFunction }，其中的回调函数并不一定非要是视图模型的函数，他可以时任何对象的函数。
备注1：传递一个当前项目作为参数
London
Paris
Tokyo
You seem to be interested in:
源码：
<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>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.lastInterest = ko.observable();
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
// The current item will be passed as the first parameter, so we know which place was hovered over
self.logMouseOver = function(place) {
self.lastInterest(place);
}
}
ko.applyBindings(new MyViewModel());
</script>
需要注意，如果你使用的是嵌套绑定上下文，比如foreach或者with，而需要处理的回调函数在视图模型中或者在父模型中，需要使用$parent或者$root前缀来进行绑定
与click绑定一样，给this取个别名比较好。
备注2：传递多个参数
此处请参考click绑定：
<div data-bind="event: { mouseover: myFunction }">
Mouse over me
</div>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>
封装多参数示例：
<div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }">
Mouse over me
</div>
使用bind函数示例：
<button data-bind="event: { mouseover: myFunction.bind($data, 'param1', 'param2') }">
Click me
</button>
备注3：允许默认动作
同click绑定一样，ko禁止默认动作，比如你将event的keypress事件绑定到一个Input元素上，那这个input元素输入的值将会被keypress回调占用而无法输入任何信息。解决方案很简单，就是在回调函数中返回true即可。
备注4：防止冒泡事件
如果要防止冒泡事件，可以直接在事件绑定后附加一个youreventBubble绑定。将该附加绑定设置为false则禁止冒泡事件的发生，例如：
<div data-bind="event: { mouseover: myDivHandler }">
<button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
Click me
</button>
</div>
备注5：Jquery互动
以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之事件event绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
内容总结
以上是互联网集市为您收集整理的KnockoutJS 3.X API 第四章之事件event绑定全部内容，希望文章能够帮你解决KnockoutJS 3.X API 第四章之事件event绑定所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。