Javascript 如何在jQuery事件映射中共享变量？

给定以下jQuery

.on（）

事件映射：

$('header').on({
  mouseenter: function(e) {},
  mouseleave: function(e) {},
}, 'li');

如何在

mouseenter

和

mouseleave

事件之间共享

var$this=$（this）

变量以保持其干燥

编辑：

更清楚地说，如果我想将逻辑应用于事件映射中的每个事件，那么假设：

mouseenter: function(e) {
  // Grabs the list element.
  var $this = $(this);

  // Gets the sub-menu of the active menu item, if there is one.
  var $subMenu = $this.find('.main-menu__sub-menu').first();

  if ($subMenu.length) {
    // Do something...
  }
},
mouseleave: function(e) {
  // Perform the same checks, and get the same variables as above...
},
click: function(e) {
  // Again, perform the same checks and grab the same variables as above...
}

---

我显然不想重复我的逻辑，但我需要获取触发事件的

li

元素，这对于事件映射中的所有事件都是相同的。。。希望这更有意义？

不确定为什么需要它，因为this变量将引用两个函数上的header元素。。 但是一种方法是在范围之外声明变量

var $this;

 $('header').on({
  mouseenter: function (e) {
        $this = $(this);
      },
  mouseleave: function (e) {
    $this; // is available
  },
}, 'li');

---

不确定为什么需要它，因为this变量将引用两个函数上的header元素。。 但是一种方法是在范围之外声明变量

var $this;

 $('header').on({
  mouseenter: function (e) {
        $this = $(this);
      },
  mouseleave: function (e) {
    $this; // is available
  },
}, 'li');

---

通过扩展描述，您可以选择以下内容：

function getSubmenu(li) {
    // Grabs the list element.
    var $li = $(li);

    // Gets the sub-menu of the active menu item, if there is one.
    var $subMenu = $li.find('.main-menu__sub-menu').first();
    return $subMenu;
}

$('header').on({
    mouseleave: function(e) {
        var $subMenu = getSubmenu(this)
        // do some stuff...
    },
    click: function(e) {
        var $subMenu = getSubmenu(this)
        // do some other stuff...
    }
 }, 'li');

---

通过扩展描述，您可以选择以下内容：

function getSubmenu(li) {
    // Grabs the list element.
    var $li = $(li);

    // Gets the sub-menu of the active menu item, if there is one.
    var $subMenu = $li.find('.main-menu__sub-menu').first();
    return $subMenu;
}

$('header').on({
    mouseleave: function(e) {
        var $subMenu = getSubmenu(this)
        // do some stuff...
    },
    click: function(e) {
        var $subMenu = getSubmenu(this)
        // do some other stuff...
    }
 }, 'li');

---

如果您的意思是希望通过

this

在事件处理程序之间共享

头

元素，那么它已经是了。jQuery就是这样工作的。如果这不是你的意思，请澄清你的问题，明确你想要创造什么样的行为。你能举一个例子说明你到底想要实现什么吗？您可以在

窗口下的全局范围中放置一个变量，但这完全取决于您想要执行的操作。此外，您可能希望将
$（this）
s彼此分离，以便让jQuery处理每个处理程序中
this
的含义。任何试图在当前运行的事件处理程序以外的上下文中重用/缓存
$（this）
的值的尝试都可能导致处理程序针对您不希望对其运行的元素运行。如果您的意思是希望通过
this
在事件处理程序之间共享
标头
元素，那就已经是了。jQuery就是这样工作的。如果这不是你的意思，请澄清你的问题，明确你想要创造什么样的行为。你能举一个例子说明你到底想要实现什么吗？您可以在
窗口下的全局范围中放置一个变量，但这完全取决于您想要执行的操作。此外，您可能希望将
$（this）
s彼此分离，以便让jQuery处理每个处理程序中
this
的含义。任何试图在当前运行的事件处理程序以外的上下文中重用/缓存
$（this）
的值的尝试都可能导致处理程序针对您不想运行它的元素运行。我希望不必创建单独的函数，也不必污染windows变量列表，但我想这是无法避免的。谢谢JavaScript目前缺少宏，因此函数成为可重用性的基本构建块。如果希望避免污染全局范围，可以将上述代码包装在立即调用的函数表达式（IIFE或“iffy”）中<代码>（函数（）{/*上面的所有代码都在这里*/}）（
这种语法有许多细微的变化。我希望不必制作一个单独的函数，也不必污染windows变量列表，但我想这是没有办法的。谢谢JavaScript目前缺少宏，因此函数成为可重用性的基本构建块。如果希望避免污染全局范围，可以将上述代码包装在立即调用的函数表达式（IIFE或“iffy”）中<代码>（函数（）{/*上面的所有代码都在这里*/}）（

这种语法有许多细微的变化。