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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
PHP4中session登录页面的应用
2008/07/25 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
php图像验证码生成代码
2017/06/08 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
python机器学习之神经网络(一)
2017/12/20 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
我们的节日端午节活动方案
2014/03/02 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书