JQuery on(): how can I define filter selectors when passing events as an object?

Question

I was wondering.. The second JQuery's on() syntax passes events like an object:

services.on({
  'mouseenter': function(e){
    console.log('enter', e.target);
  },

  'mouseleave': function(e){
    console.log('leave', e.target);
  },

  'click': function(e){
    console.log('click', e.target);
  }
});

Fine. As a second argument, I can pass a filter selector: just fine.

Problem: what if I want different filters for different event types? A common use case is having mousenter triggered by main elem's children, while mouseleave triggered by the main elem itself.

Currently, the only way I know to do it is just define events one by one, with the first syntax, like this:

services.on('mouseenter','li',function(e){
  console.log('enter', e.target);
});

services.on('mouseleave',function(e){
  console.log('leave', e.target);
});

Is there any special syntax to avoid this? Form the docs is not clear.

Toothbrush · Answer 1 · 2015-08-14T11:15:48.077

Well, you can chain the calls. That would be less typing.

services.on('mouseenter', 'li', function(event) {
    console.log('enter', event.target);
}).on('mouseleave', 'a', function(event) {
    console.log('leave', event.target);
}).on('click', 'li > a' function(event) {
    console.log('click', event.target);
});

There is no way to pass an object for the events and have custom selectors for each one – unless you write your own code for that.

JQuery on(): how can I define filter selectors when passing events as an object?

1 Answers1