目的

click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。

 

例子

<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div> <script type="text/javascript">
var viewModel = {
numberOfClicks: ko.observable(0),
incrementClickCounter: function () {
var previousCount =this.numberOfClicks();
this.numberOfClicks(previousCount +1);
}
};
  ko.applyBindings(viewModel);
</script>

每次点击按钮的时候,都会调用incrementClickCounter()函数,然后更新自动更新点击次数。

 

参数

 主参数

Click点击事件时所执行的函数。

你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如:someObject.someFunction。

View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写incrementClickCounter就可以了,而无需写成: viewModel.incrementClickCounter(尽管是合法的)。

其它参数

 

 

click 绑定(一)无参数的click 事件绑定的更多相关文章

  1. 事件绑定的快捷方式 利on进行事件绑定的几种情况

    [事件绑定快捷方式]$("button:first").click(function(){ alert(1); }); [使用on绑定事件] ① 使用on进行单事件绑定 $(&qu ...

  2. js、jq事件绑定方式总结——以click事件为例

    一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...

  3. jQuery事件绑定—on()、bind()与delegate()

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...

  4. MVVM设计模式和WPF中的实现(四)事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  5. Javascript 事件对象(四)一个事件绑定多个不同的函数

    给一个对象绑定多个事件处理函数: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...

  6. js事件绑定

    事件绑定,常见的是odiv.onclick=function(){..........};  这种方式绑定事件太单一,如果绑定多个,那么最后一个事件会覆盖掉之前的,也就是说只执行最后一次绑定的事件,这 ...

  7. JavaScript事件---事件绑定和深入

    发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容 事件绑定分为两种:一种是传统事件绑定(内联模型, ...

  8. JavaScript的事件绑定及深入

     事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一.传统事件绑定的问题传统事件绑定有内联模型 ...

  9. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

随机推荐

  1. 在ubunut下使用pycharm和eclipse进行python远程调试

    我比较喜欢Pycharm,因为这个是JetBrains公司出的python IDE工具,该公司下的java IDE工具--IDEA,无论从界面还是操作上都甩eclipse几条街,但项目组里有些人使用e ...

  2. ASIHTTPRequest 在release(打包)模式下数据获取或post失败问题

    ASIHTTPRequest 在relase模式下失效 表现为,调用网络请求后没有任何反应 原因之一: ARC模式下,在ASIHTTPRequest 前面会加上__weak来解决循环应用,这个__we ...

  3. IOS文件管理-NSFileMangager-NSdata

    Ios下的文件管理, Ios下不像windows 文件系统那样可以访问任何的文件目录,如C盘.D盘什么的.在Ios中每个应用程序只能访问当前程序的目录,也即sandbox(沙盒模型). iOS为每个应 ...

  4. 捕获异常的两种方式Exception

    1.抛出异常:让调用此方法的代码去管 public static void GetFile() throws Exception{} package com.throwable; import jav ...

  5. SDIO接口

    SDIO卡是在SD内存卡接口的基础上发展起来的接口,SDIO接口兼容以前的SD内存卡,并且可以连接SDIO接口的设备,目前根据SDIO协议的SPEC,SDIO接口支持的设备总类有蓝牙,网卡,电视卡等. ...

  6. 使用Dmitry Sklyarov的方法来破解一款流行的4G调制解调器

    逆向工程师如果对设备代码和固件系统进行检测时,发现了许多经过加密处理的固件文件,该怎么办?在本文中我将通过一个真实的故事来教大家如何利用一些基础的计算机知识以及简单的逻辑来应对这一问题. 因为这篇文章 ...

  7. C++ Primer---- 奇怪的 protected 成员

    protected 成员在 C++ Primer 第四版中有如下描述: 可以认为 protected 标号是 private 和 public 的混合: 1. 像 private 成员一样, prot ...

  8. C++ algorithm 里的sort函数应用

    MSDN中的定义: template<class RanIt>    void sort(RanIt first, RanIt last); //--> 1)template< ...

  9. React Native 弹性布局FlexBox

    React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...

  10. XMPP即时通讯

    XMPP:XMPP是基于XML的点对点通讯协议,The Extensible Messaging and Presence Protocol(可扩展通讯和表示协议). XMPP可用于服务类实时通讯,表 ...