使用循环绑定事件

Question

​

//I hava this tool function to bind event
var bindEvent = function($dom,events,data,_this){
  for(var key in events){
    $dom.bind(key,function(){
      events[key].apply(_this,[data]);
    });
  }
};

//and use like this
var events = {
  click:function(){
    alert("click");
  },
  dblclick:function(){
    alert("dblclick");
  }
};

var $btn = $("#btn");
bindEvent($btn,events,"mydata",$btn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">MYBtn</button>

​

当我单击按钮时，dblclick事件总是被触发。

我知道这个问题的原因。

在"for“循环中使用的bind事件时有一个闭包。在循环结束时，内存中的最后一个对象(有dbclick回调函数)。

因此，当触发click事件时，它运行alert("dblclick")。

我想知道有没有解决这个问题的好办法。或者有一种为绑定事件实现工具函数的好方法。

非常感谢。

Answer 1

在for-in循环中创建一个for-in(同时附加event)，inner-function将记住在其中创建它的环境！

​

var bindEvent = function($dom, events, data, _this) {
  for (var key in events) {
    $dom.bind(key, (function(key) {
      return function() {
        events[key].apply(_this, [data]);
      }
    })(key));
  }
};
var events = {
  click: function() {
    console.log("click");
  },
  dblclick: function() {
    console.log("dblclick");
  }
};

var $btn = $("#btn");
bindEvent($btn, events, "mydata", $btn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">MYBtn</button>

​

注意:当alert在click事件上被调用时，dblclick事件被阻止了，使用console.log代替alert并进行测试！

Answer 2

我不知道您为什么需要data，但是通常您不需要一个循环来添加多个事件。您只需将对象传递给bind或on即可。而且，因为在事件中，this总是元素，所以不需要设置上下文。

​

$("#btn").on({
    click: function() {
        console.log("click");
    },
    dblclick: function() {
        console.log("dblclick");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">MYBtn</button>

​

或者使用包装器函数的长版本：

​

var bindEvent = function($dom, events) {
    $dom.bind(events);
};

var events = {
    click: function(){
        console.log("click");
    },
    dblclick: function(){
        console.log("dblclick");
    }
};

var $btn = $("#btn");
bindEvent($btn, events);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">MYBtn</button>

​

Answer 3

这两个事件总是相互矛盾的，但是您可以通过小时间间隔之间的点击次数来实现这一点。

​

//I hava this tool function to bind event
var bindEvent = function($dom,events,data,_this){
    $dom.on(events);
  
};
var dblckickinterval = 500, clicks = 0, timer = null;
//and use like this
var events = {
  click:function(e){
   clicks++;  //count clicks

        if(clicks === 1) {
            timer = setTimeout(function() {
                alert("click");  //perform single-click action    
                clicks = 0; //after action performed, reset counter
            }, dblckickinterval);
        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("dblclick");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }
    
  },
  dblclick:function(e){
    e.preventDefault();
    
  }
};

var $btn = $("#btn");
bindEvent($btn,events,"mydata",$btn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">MYBtn</button>

​