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

Question

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

所以我用各种方法编写了代码，但所有方法都不起作用，而且每个方法都有其特定的错误。

  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 方法中是否有任何方法可以在事件和处理程序之间进行匹配？

Answer 1

当您使用绑定的 on(object) 版本时，您必须给它一个单独的对象，包含 key/value 对 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>

Answer 2

@kekboi，欢迎来到 Whosebug！

你的第二次尝试，

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

非常接近。鉴于函数上的 () 立即调用给定函数，这不是您想要的，并且正如@Taplar 所建议的那样 - on 接受 an 对象 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>

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

How to give multiple events and handlers in .on method?

javascript

jquery

events

handler

mouseenter