【问题标题】:Once an event is bound in jQuery how do you get a reference to the event handler function?一旦在 jQuery 中绑定了一个事件,你如何获得对事件处理函数的引用?
【发布时间】:2013-05-09 10:49:15
【问题描述】:

如果我附加一个点击事件处理程序:

$(".selector").bind("click", function () {
  // some handler function
});

如何获得对该函数的引用?这不起作用:

var refToFunc = $(".selector").bind("click");
typeof refToFunc === "object";  // I want the function

我认为bind("eventname") 在这种情况下只返回 jQuery 对象而不是事件处理函数。它必须存储在某个地方。

【问题讨论】:

  • 您想通过在绑定调用之外定义函数还是将其绑定到调用内部的变量来避免引入变量?
  • 是的,我只是想存储它并暂时取消绑定事件。

标签: javascript jquery


【解决方案1】:

非常有趣的问题。您可以像这样检索它:

var refToFunc = $(".selector").data("events")["click"][0].handler;

请注意,我们使用[0] 是因为您有一组处理程序,以防您绑定多个处理程序。对于其他事件,只需更改为事件名称即可。

编辑 一般来说,您可以使用以下插件来获取事件的选定元素的所有处理程序(代码尚未优化):

$.fn.getEventHandlers = function(eventName){
  var handlers = [];
  this.each(function(){
     $.each($(this).data("events")[eventName], function(i, elem){
         handlers.push(elem.handler);    
     });     
  });
  return handlers;
};

如何使用?:

$(".selector").getEventHandlers("click");

它会返回一个包含所有事件处理程序的函数数组。

对于您的具体问题,您可以像这样使用这个插件:

var refToFunc = $(".selector").getEventHandlers("click")[0];

希望这会有所帮助。干杯

【讨论】:

  • [0] 吓到我了……当你准备解除绑定时,你的处理程序可能不在第 0 位
【解决方案2】:

事件处理程序保存在数据对象中,可通过data 访问。例如:

$('.selector').data('events').click[0].handler;

这将获取绑定到此函数的click 事件的第一个事件处理函数。


如果您想保留函数的引用,例如为了解除绑定,最好将其存储在变量中或使其成为命名函数。

var handler = function() {
    // some content
});

$('.selector').bind('click', handler);

【讨论】:

  • 是的,我想将它存储起来,以便暂时解绑并稍后重新绑定。命名选项很好,但我不会总是控制添加的功能。
【解决方案3】:

这是我最终得到的功能:

var getEventHandlers = function ($object, eventName) {
    var handlers = [],
        eventHandlers = $object.data("events")[eventName];
    if (eventHandlers && eventHandlers.length > 0) {
        for (var i = 0, l = eventHandlers.length; i < l; i++) {
            handlers.push(eventHandlers[i].handler);
        }
    }
    return handlers;
},
setEventHandlers = function ($object, eventName, handlers) {
    if (handlers && handlers.length > 0) {
        for (var i = 0, l = handlers.length; i < l; i++) {
            $object.bind(eventName, handlers[i]);
        }
    }
};

【讨论】:

    猜你喜欢
    • 2016-12-09
    • 2011-09-26
    • 2011-09-06
    • 1970-01-01
    • 2021-09-09
    • 2021-11-01
    • 1970-01-01
    • 2010-10-04
    • 1970-01-01
    相关资源
    最近更新 更多