javascript - 我可以将元素作为第一个参数传递给 JavaScript 中的事件处理程序的最简单方法是什么？

Question

我知道在事件处理函数中将 this 的值更改为接收事件的元素非常有用。但是，我想让我的函数始终在我的应用程序上下文中调用，而不是在元素上下文中调用。这样，我就可以将它们用作事件处理程序，并以其他方式使用，例如在 setTimeout 调用中。

所以，代码如下:

window.app = (function () {
    var that = {
        millerTime: function () {},
        changeEl: function (el) {
            el = el || this;
            // rest of code...
            that.millerTime();
        }
    };
    return that;
}());

可以这样:

window.app = (function () {
    return {
        millerTime: function () {},
        changeEl: function (el) {
            // rest of code...
            this.millerTime();
        }
    };
}());

第一种方式让我感到困惑。有没有一种简单的方法可以将接收事件的元素作为第一个参数(最好是 jQuery 包装的元素)传递给我的事件处理函数并在应用程序的上下文中调用？假设我使用 jQuery 绑定(bind)了一堆事件处理程序。我不想一直包含匿名函数:

$('body').on('click', function (event) {
    app.changeEl.call(app, $(this), event);  // would be nice to get event too
});

我需要一个函数来为我处理这一切。在这一点上，我觉得没有绕过传递匿名函数的方法，但我只是想看看是否有人可能有解决方案。

我的尝试:

function overrideContext (event, fn) {
   if (!(this instanceof HTMLElement) ||
         typeof event === 'undefined'
   ) {
       return overrideContext;
   }

   // at this point we know jQuery called this function // ??
   var el = $(this);

   fn.call(app, el, event);
}

$('body').on('click', overrideContext(undefined, app.changeEl));

使用 Function.prototype.bind(我是新手)，我仍然无法获取元素:

window.app = (function () {
    return {
         millerTime: function () {},
         changeEl: function (el) {
            // rest of code...
            console.log(this); // app
            this.millerTime();
         }
    };
}());

function overrideContext (evt, fn) {
    var el = $(this); // $(Window)
    console.log(arguments); // [undefined, app.changeEl, p.Event] 
    fn.call(app, el, event);
}

$('body').on('click', overrideContext.bind(null, undefined, app.changeEl));

使用 $('body').on('click', overrideContext.bind(app.changeEl)); 相反，这指向我的 app.changeEl函数，我的参数长度为 1，并且仅包含 p.Event。在这两种情况下我仍然无法获取元素。

Answer 1

像这样定义一个函数应该给你你想要的:

function wrap(func) {
  // Return the function which is passed to `on()`, which does the hard work.
  return function () {
    // This gets called when the event is fired. Call the handler
    // specified, with it's context set to `window.app`, and pass
    // the jQuery element (`$(this)`) as it's first parameter.
    func.call(window.app, $(this) /*, other parameters (e?)*/);
  }
}

然后你可以像这样使用它；

$('body').on('click', wrap(app.changeEl));

有关详细信息，请参阅 Function.call()

---

^{此外，我想推荐反对这种方法。精通 JavaScript 的程序员期望超时和事件处理程序的上下文发生变化。剥夺他们的基本原则就像我在没有指南针的情况下将你扔进撒哈拉沙漠。}