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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
80行代码写一个Webpack插件并发布到npm
May 24 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连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP查询分页的实现代码
2017/06/09 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
javascript常用的方法整理
2015/08/20 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python自动裁剪图像代码分享
2017/11/25 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
浅析python标准库中的glob
2020/03/13 Python
python 日志 logging模块详细解析
2020/03/31 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
细节决定成败演讲稿
2014/05/12 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python