使用循环绑定事件

Use loop to bind events

本文关键字：事件 绑定 循环      更新时间：2023-09-26

//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"循环。循环终止后，内存中的最后一个对象(有 dbclick 回调函数(。
因此，当触发click事件时，它会alert("dblclick")运行。
我想知道是否有解决这个问题的好方法。或者有一个很好的方法来实现绑定事件的工具功能。
谢谢。

在循环

for-in创建一个closure(同时附加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>

注意：由于click事件被调用alert，dblclick阻止了该事件，请使用console.log而不是alert并进行测试！

我不知道

为什么你需要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>

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

//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>

试试这个：

var eventBinder = function(obj, events) {
  $.each(events, function(key, value) {
    obj.on(key, function(e) {
      events[key]();
    });
  });
}
var eventsData = {
  click: function(e) {
    console.log("click");
  },
  dblclick: function(e) {
    console.log("dblclick");
  }
};
eventBinder($("#btn"), eventsData);
<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,data,_this){
    dom.bind(events,function(){
    for(var key in events){
      events[key].apply(_this,[data]);
    }
  });
}
相关文章：