KnockoutJS 3.X API 第四章之事件event绑定


Posted in Javascript onOctober 10, 2016

目的

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

Javascript 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 #Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 #Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 #Javascript
浅谈jquery中使用canvas的问题
Oct 10 #Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 #Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 #Javascript
You might like
php Memcache 中实现消息队列
2009/11/24 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
车队司机自我鉴定
2014/03/02 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
社区安全温馨提示语
2015/07/14 职场文书
结婚主持人致辞
2015/07/28 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers