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

Question

I'm trying to move a submenu by using multiple handlers in on method. What I want is if I moved my mouse on the one of li elements, event string mouseenter detects, then executes function panelON and same ways go between mouseleave and function panelOFF.

So I wrote the codes various ways but all of them didn't work and each of those have its own specific errors.

  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
    }
  }

This one prints an error Unexpected token ||. Seems like || marks cannot be used with insdie of handlers.

Next one I tried is just grouped event and handlers all of them like in this article. 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')
  }

And this was started immediately no matter what I hovered target or not.

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

Last one. This one only prints mouseenter. mouseleave doesnt work. Is there any ways to give and matching between events and handlers in .on method?

In your bottom two snippets, in order; the first one is incorrect because you are doing `panelOn(event)` which is trying to invoke the method. And both of them are incorrect, because you are giving the `on()` multiple objects. It should be `on({event1: handler, event2: handler, ...})` — Taplar, Oct 09 '18 at 13:42

score 2 · Answer 1 · answered Oct 09 '18 at 13:45

When you use the on(object) version of the bindings, you have to give it a single object, contain key/value pairs of the event:handler, as demonstrated below.

$('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>

PeterKA · Accepted Answer · 2018-10-09T14:10:50.990

@kekboi, welcome to StackOverflow!

Your second try,

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

was quite close. Given that () on a function invokes the given function immediately, which is not what you intended, and as @Taplar has suggested - on takes an object on(object) - I suggest you use the following version.

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 Both ways are works smoothly!! Thank you guys :> – Patrick the Star Oct 09 '18 at 14:05 — Patrick the Star, Oct 09 '18 at 14:05

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

2 Answers2