jQuery: .on() using events in a plain object to reference one function

Question

I find the presentation/style of the following jQuery .on() preferable (ie handing over a plain object that can contain multiple events/callbacks):

$( selector ).on( {  mouseover:function(event) {
                       console.log('mouseover');
                     },
                     mouseout:function(event) {
                       console.log('mouseout');
                     }
                   });

However I would like both mouseover and focus to reference the same function so I tried the following:

$( selector ).on( {  'mouseover, focus':function(event) {
                       console.log('over/focus');
                     },
                     'mouseout, focusout':function(event) {
                       console.log('mouseout/focusout');
                     }
                   });

The results were focus and focusout worked but not mouseover/mouseout.

Could anyone guide me on how to do this inside a plain object, ie with this structure/style of using .on()

Many thanks in advance

Possible duplicate of [jQuery multiple events to trigger the same function](http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function) — Mustapha Aoussar, Nov 14 '15 at 17:03
Thank you for your negative contribution. The key difference in my question was simply the events and handling all being contained in a plain object and 'possible duplication' differs from that. However I accept the string containing the events with a space and not a comma resolves the issue. — user2190690, Nov 14 '15 at 17:14
@user2190690: There's no need to have a go at Fuiba. Yes, there's a difference in the question, but it was a reasonable question to point to. — T.J. Crowder, Nov 14 '15 at 17:35
@T.J.Crowder. I'm not having a go a Fuiba. I'm sure he's an awesome person, and clearly more clued up at jQuery than me :-) The response was an ironic gesture of humour that may not have been read as such... — user2190690, Nov 14 '15 at 17:38

score 3 · Accepted Answer · answered Nov 14 '15 at 17:00

From the documentation:

An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

(my emphasis)

So lose the commas:

$( selector ).on( {  'mouseover focus':function(event) {
// No comma -------------------^
                       console.log('over/focus');
                     },
                     'mouseout focusout':function(event) {
// No comma ------------------^
                       console.log('mouseout/focusout');
                     }
                   });

Or of course, use named functions.

Here's an example using events that are unrelated to each other (for clarity):

$("#the-element").on({
  "change click": function(e) {
    $("<p>").text("Got " + e.type).appendTo(document.body);
  }
});

<input type="text" id="the-element">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery: .on() using events in a plain object to reference one function

1 Answers1