knockout click点击事件及事件源解释

来源：互联网发布：2017最流行网络用语编辑：程序博客网时间：2024/06/05 04:31

绑定click点击事件示例

<body>    you've clicked<span data-bind="text:number"></span>    <button data-bind="click:count">Click Me</button></body><script type="text/javascript">    var viewModel={        number:ko.observable(0),        count:function(){            var preCount=this.number();            this.number(preCount+1);        }    };    ko.applyBindings(viewModel);</script>

结果

you’ve clicked 0
Click Me
当点击Click Me 的时候(you’ve clicked 0) 0会加1，无限叠加

事件源：( event )

在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input.

有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：

<button data-bind="click: myFunction">    Click me</button><script type="text/javascript">    var viewModel = {        //knockout默认是将源事件作为函数的第一个参数，你可以在button中不传event这个参数        myFunction: function(event) {            if (event.shiftKey) {            } else {}       } };</script>

如何获取事件对象那？？
var e = event || window.event;这句话就是定义了一个变量来获取事件对象，因为不同的浏览器获取事件对象的方法有点不太一样，IE下是window.event，标准下是event，为了兼容所以写了event || window.event.

允许执行默认事件

//如果绑定了click事件后，默认事件为点击事件href的时间将不会触发<a href="http://www.baidu.com" data-bind="click:myFunction" taget="_blank">Baidu</a><script type="text/javascript">    var viewModel = {    //当点击A标签时会执行这个函数，然后结束，不会进行跳转        myFunction: function() {           alert("OK");      } };           </script>//解决办法<a href="http://www.baidu.com" data-bind="click:myFunction" taget="_blank">Baidu</a><script type="text/javascript">    var viewModel = {    //当点击A标签时会执行这个函数后在进行跳转        myFunction: function() {           alert("OK");           return true;      } };           </script>

更多click事件请点击这里

阅读全文

0 0