Question

I’m trying to create an .on() method using events-map. I want to change this: $("ul").on("click", "li", function() {...}); to something like this:

$("ul").on({
    click: function() {...},
    mouseenter: function() {...},
    mouseleave: function() {...}
});

Where do I put the selector “li” in the events-map?

Answer 1

You just put it as the second argument as usual:

$("ul").on (
  {
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
  },
  'li'
);

From the docs:

.on( events-map [, selector] [, data] )

events-map A map 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).

selector A selector string to filter the descendants of the selected elements that will
call the handler. If the selector is null or omitted, the handler is always called when
it reaches the selected element.

data Data to be passed to the handler in event.data when an event occurs.

Parameters enclosed in [] are optional. So, if you do not pass a selector, the events are bound to the elements in the jQuery object, in this case all ul-elements on the page. If, however, the selector is provided, then the elements in the jQuery objects handles event delegation for the set of elements matched by the selector. I.e when an event occurs on an element matching the selector that is a descendant of the element in the jQuery object, that event handler will be called once the event has bubbled its way up to the parent. Note that this means that if the event propagation is canceled before it reaches the parent, the event handler will not be called.