如何在 .on 方法中提供多个事件和处理程序？答案

【问题标题】：How to give multiple events and handlers in .on method?如何在 .on 方法中提供多个事件和处理程序？
【发布时间】：2018-10-09 13:39:18
【问题描述】：

我正在尝试通过在on 方法中使用多个处理程序来移动submenu。我想要的是，如果我将鼠标移到li 元素之一上，事件字符串mouseenter 检测到，然后执行function panelON 并且mouseleave 和function panelOFF 之间的方式相同。

所以我以各种方式编写代码，但都没有工作，而且每个都有自己的特定错误。

  target = $('#home-menu-nav ul li');
  target.on('mouseenter mouseleave', {
    convert: $('#submenu-content'),
    panelON(event) || panelOFF(event)
  })

  function panelON(event) {
    if (event.type == 'mouseenter') {
      console.log('fx panelON detected')
    } else {
      return
    }
  }

这个打印错误Unexpected token ||。似乎|| 标记不能与处理程序的insdie 一起使用。

我尝试的下一个只是分组事件和处理程序，所有这些都像本文中一样。 link

  target.on( {mouseenter: panelON(event)}, {mouseleave: panelOFF(event)} )

  function panelON(event) {
    console.log('fx panelON detected')
  }

  function panelOFF(event) {
    console.log('fx panelOFF detected')
  }

无论我是否悬停target，这都会立即开始。

  target = $('#home-menu-nav ul li');
  target.on( {mouseenter: function() {
    console.log('fx panelON detected')
  }}, {mouseleave: function() {
    console.log('fx panelOFF detected')
  }} )

最后一个。这个只打印mouseenter。 mouseleave 不起作用。 .on 方法中的事件和处理程序之间有什么方法可以提供和匹配？

【问题讨论】：

在你底部的两个sn-ps中，按顺序；第一个不正确，因为您正在尝试调用该方法的panelOn(event)。而且它们都是不正确的，因为您要给 on() 多个对象。应该是on({event1: handler, event2: handler, ...})

标签： javascript jquery events handler mouseenter

【解决方案1】：

当您使用on(object) 版本的绑定时，您必须给它一个单独的对象，包含 event:handler 的键/值对，如下所示。

$('button').on({
  mouseenter: function(){ console.log('Im In!'); }
  , mouseleave: function(){ console.log('Im Out!'); }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover Me</button>

【讨论】：

【解决方案2】：

@kekboi，欢迎来到 StackOverflow！

你的第二次尝试，

target.on( {mouseenter: panelON(event)}, {mouseleave: panelOFF(event)} )

非常接近。鉴于函数上的() 会立即调用给定的函数，这不是您想要的，并且正如@Taplar 所建议的那样 - on take an object on(object) - 我建议您使用以下版本.

target.on({ mouseenter: panelON, mouseleave: panelOFF });

$(function() {
    var target = $('button.mybutton');
    
    target.on({ mouseenter: panelON, mouseleave: panelOFF });

    function panelON(event) {
        console.log('fx panelON detected')
    }

    function panelOFF(event) {
        console.log('fx panelOFF detected')
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybutton">Hover Me Now</button>

【讨论】：

@Taplar 两种方式都很顺利！！谢谢你们：>