改变“这个”当使用 $.trigger() 在 jQuery 中触发自定义事件时

Question

我正在尝试在 javascript 中实现事件池模式，类似于此处描述的内容： http://www.michaelhamrah .com/blog/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

我需要能够设置上下文事件在被触发时关闭，而不是在绑定时关闭。是否有某种方法结合 $.trigger 和 $.proxy 来做到这一点？

Answer 1

我只是将其放在这里供其他人谷歌搜索，但这并不是触发时间部分整个绑定的实际答案。

这是一种解决方案，它包装绑定函数以根据触发时提供的参数设置其上下文。如果你想在触发时传递参数，那就不好了。

EventPool = (function() {
  function EventPool() {}
  EventPool.Subscribe = function(event, fn) {
    return $(this).bind(event, $.proxy(function(event, context) {
      context = context != null ? context : this;
      return $.proxy(fn, context)(event);
    }, this));
  };
  EventPool.Publish = function(event, context) {
    return $(this).trigger(event, context);
  };
  return EventPool;
})();

Answer 2

首先：感谢您对自己问题的回答。它让我找到了自己的解决方案，我想我会与您和所有其他正在寻找它的人分享。

它是对您的修改，但仍然允许向您的 EventPool.Publish 方法传递附加参数。请注意，我的案例与您的案例有很大不同。另请注意，jQuery.proxy 的作用与 Function.bind 几乎相同。 （顺便说一句，我确实意识到这个答案已经有两年了。）

演示代码可以在此处找到。

片段和解释

function subscribe( ) {
    var args  = argsToArray(arguments), // Helper function to convert `arguments` object into array. Otherwise `Function.apply` won't accept it.
        fn    = args[args.length - 1], // The event handler is always the last argument passed to `jQuery.on`.
        $this = $(this);

    args[args.length - 1] = router.bind(this, fn); // Change handler to our context changer.

    $this.on.apply($this, args); // Call jQuery().on() with modified arguments.
    return this;
}

Function.bind 本质上与 jQuery.proxy 相同。我们将用它来记住最终调用哪个处理程序。

---

router 函数调用实际的事件处理程序，更改其上下文。

function router( ) {
    var args    = argsToArray(arguments),
        fn      = args.shift(), // Remember, we prefixed `router` with the actual event handler.
        evt     = args[0],
        context = evt.context || this;

    // No need to reference the context twice.
    delete evt.context;

    fn.apply(context, args);
}

jQuery 允许使用 jQuery.Event（函数）轻松创建事件。我们在这里检索一个名为 context 的自定义属性，以用作真实处理程序的实际上下文。如果未设置/计算结果为 false，则回退到旧的 this 上下文。

最终，我们使用传递给 jQuery().trigger 的所有参数手动调用实际处理程序。

如需使用，请检查链接的小提琴。