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

最新推荐文章于 2021-11-16 13:36:23 发布

qq_37801118

最新推荐文章于 2021-11-16 13:36:23 发布

阅读量2k

点赞数

分类专栏： knockout click 文章标签： ko-click

本文链接：https://blog.csdn.net/qq_37801118/article/details/78490229

版权

knockout 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

click

1 篇文章 0 订阅

订阅专栏

绑定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>