从内部点击事件访问jQuery版DOM元素的最佳方法？

Question

一个常见的结构是：

$('#someSelector').on('click', function(){
    $(this).doSomething();
    $(this).doSomethingElse();
});

原因是this引用了本机DOM元素，如果我们想在事件处理程序中使用jQuery方法，我们需要重新包装它。当然我可以创建一个变量$this = $(this);来保存自己不得不重复重建它，但我想知道是否有更好的方法。

有没有办法从jQuery事件处理程序中访问元素AS jQuery对象？

Answer 1

（1）在向事件处理程序附加事件处理程序之前，您可以存储对事件处理程序之外的元素的引用。

var $element = $('#someSelector');

$element.on('click', function () {
    $element.doSomething();
    $element.doSomethingElse();
});

（2）正如您所提到的，您可以在事件处理程序中存储引用。

$('#someSelector').on('click', function () {
    var $this = $(this);
    $this.doSomething();
    $this.doSomethingElse();
});

（3）或者，如果你感到疯狂，你可以在事件处理程序中有一个自调用函数，该函数作为参数传入$this。

$('#someSelector').on('click', function () {
    (function ($this) {
        $this.doSomething();
        $this.doSomethingElse();
    })($(this));
});

（4）或者您甚至可以使用$(this)的上下文调用自调用函数，以便this === $(this)

$('#someSelector').on('click', function () {
    (function () {
        this.doSomething();
        this.doSomethingElse();
    }).call($(this));
});

（5）或者您可以使用Function.prototype.bind或$.proxy

创建包含所需上下文的事件处理程序

var $element = $('#someSelector');

$element.on('click', function () {
    this.doSomething();
    this.doSomethingElse();
}.bind($element));

你有一些选择......