我希望将目标 origTarget 上发生的所有事件路由/重定向到另一个对象 otherObject。我想完成这样的事情:

/* Magic binding (doesn't work!). */
$(origTarget).bind('*', function(e) {
    $(otherObject).trigger(e);
});

如果不遍历所有可能的事件类型，这是否可以通过 jQuery 实现？

这个例子应该用'hello'提醒:

var origTarget = { };
var otherObject = { };

/* Do magic binding here. */

$(otherObject).bind('alert', function() {
    alert('hello');
});

$(origTarget).trigger('alert');

最佳答案

我认为您正在寻找的东西可以通过重新评估您首先绑定(bind)事件的方式来实现。如果您真的想查看目标对象中发生了什么，您应该将事件绑定(bind)到目标对象。

话虽如此，让我们尝试为您找到解决方案

稍微深入研究一下 jQuery.event，我没有看到任何“简单的方法”来完成这个。然而，似乎使用 jQuery.data(elem,'events') 将事件缓存在对象中。有几个选项供您探索

将绑定(bind)事件从一个对象复制到另一个对象

在 jQuery 1.3.2 中编写和测试的潜在事件复制解决方案:

(function($){ 
  $.fn.proxyEventsFrom = function(target) {
    // cache this for later
    var $target = $(target);

    return this.each(function() {
      // store a copy of the element to use in the event handler callback
      var elem = this; 

      // get a list of events that I subscribe to
      var events = $(this).data("events") || {};

      $.each(events, function(type, handlers) {
        // bind onto this event on the target
        $target.bind(type, function(event) {
          var evArgs = arguments;
          // store the element that event originally fired on in the event object.
          event.proxyFrom = this; 
          $.each(handlers, function(guid, handler) {
            var ret = handler.apply(elem, evArgs);
            // to behave like other event handlers.
            if( ret !== undefined ){
              event.result = ret;
              if ( ret === false ) {
                event.preventDefault();
                event.stopPropagation();
                return false; // stop our each loop too
              }
            }
          }); // end $.each(handlers, function(guid, handler) 
          return event.result;
        }); // end $target.bind(type, function(event) 
      });// end $.each(events, function(type, handlers) 
    });// end this.each(function() {});
  }; // end $.fn.proxyEventsFrom
})(jQuery);

$(someObject).proxyEventsFrom(targetObject);

这通过读取 someObject 正在监听的所有事件，然后在相同事件类型的 targetObject 上绑定(bind)一个新事件来调用所有的someObject 上的事件处理程序。 someObject 上的事件处理程序可能如下所示:

$(someObject).bind('alert', function(e) {
  if (e.proxyFrom) { alert('Proxied Succesfully!'); }
  alert('test');
});
$(someObject).proxyEventsFrom(targetObject);
$(targetObject).trigger('alert');

如果您将事件代理到代理回来的东西，这种方法可以很容易地生成事件处理程序的递归循环。小心。

覆盖 jQuery.event.trigger

可以覆盖事件触发函数来完成你想要的，尽管我出于以下几个原因建议不要这样做:覆盖库中的东西是危险的，你最终会得到比你想要的更多的东西，并且此函数只会在使用 .trigger() 时被调用 - 因此不适用于标准 DOM 事件。

  (function() { // wrap this in a closure so origTrigger can't be overwritten.
    var origTrigger = jQuery.event.trigger;
    jQuery.event.trigger = function(event, data, elem, bubbling)
    {
      if (elem === origTarget) {
        if (origTrigger.call(this, event, data, otherObject, bubbling) === false) return;
      } 
      return origTrigger.apply(this,arguments);
    }
  })();

使目标的事件===另一个对象的事件

如果 origTarget 永远不会有自己绑定(bind)的事件，您可以通过引用复制事件对象。

  // copy the events table by reference from otherObject "events" data 
  // (create if neccesary)
  $.data(origTarget, 'events', 
    $.data(otherObject,'events') || $.data(otherObject,'events',{}));

  // need to setup handler since jQuery isn't creating it for us
  // function source found on line 2465 of jquery-1.3.2.js

  var handle = $.data(origTarget, 'handle', function(){
    return typeof jQuery !== "undefined" && !jQuery.event.triggered ?
      jQuery.event.handle.apply(arguments.callee.elem, arguments) :
      undefined;
  });
  handle.elem = origTarget;

自定义“句柄”函数

要实现此解决方案还有很长的路要走，在内部，所有 jQuery 事件都通过存储在 $.data(elem, 'handle') 中的“handle”函数传递。因此，如果您在目标上重写该函数，您应该能够将事件代理到另一个对象。该解决方案假设您只有一个额外的监听器，但它可以很容易地适应多个监听器。我认为这是我想到的最好的方法:

  jQuery.event.proxyEvents = function(fromObject, toObject) {
    // create an new handle function
    var newHandle = function(event) {
      // the test in the original handler returns undefined if jQuery.event.triggered
      if (jQuery.event.triggered) return undefined;
      // event should be safe - but just in case lets take a trick from
      // jQuery.event.handle
      event = arguments[0] = jQuery.event.fix(event || window.event);
      // if we have a "listener"
      if (arguments.callee.listener) {
        // set proxyFrom for access in bound event handlers
        event.proxyFrom = arguments.callee.elem;
        // call the root "handle" function on the listener
        jQuery.event.handle.apply(arguments.callee.listener, arguments);
        // if we got a result of false from the event callbacks - exit early
        if (event.result === false) return;
        // clean that proxy property out
        delete event.proxyFrom;
      }
      // this is all the basic 'handle' function does:
      jQuery.event.handle.apply(arguments.callee.elem, arguments);
    };
    // properties of the handler function
    newHandle.elem = fromObject;
    newHandle.listener = toObject;
    // store it
    jQuery.data(fromObject, 'handle', newHandle);
  };
  jQuery.event.proxyEvents(origTarget, otherObject);

它甚至可以与 DOM 元素一起使用(尽管您需要传递元素，而不是 jQuery 对象)

  jQuery.event.proxyEvents($('span')[0], $('input')[0]);

关于javascript - 将一个对象上的事件路由到另一个对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1447595/