jQuery event delegation with many events and handlers

Question

My question is related to space and readability more so than anything else, but here I go.

I need to use event delegation to get my dynamically added elements working with my jQuery functions. However I'm looking to combine two ways of handling the events. Basically I want this:

$("div").on({
    mouseenter: function() {
        console.log( "hovered over a div" );
    },
    mouseleave: function() {
        console.log( "mouse left a div" );
    },
    click: function() {
        console.log( "clicked on a div" );
    }
});

But I want to use event delegation and have selectors for each event:

$("ul").on("click", "li", function() {
    console.log( "Something in a <ul> was clicked, and we detected that it was an <li> element.");
});

Conclusion: Is it possible to have event delegation when using the first example? Example of what I'd like:

$("div").on({
    mouseenter, 'div': function() {
        console.log( "hovered over a div" );
    },
    mouseleave, 'tr, td, div': function() {
        console.log( "mouse left a div" );
    },
    click, 'td div': function() {
        console.log( "clicked on a div" );
    }
});

Edit fixed some capitalized letters and some indents on code. Guess it made the whole thing look a bit cleaner, thnx ;) — CatrPillr, Apr 03 '14 at 10:26

score 3 · Accepted Answer · answered Apr 03 '14 at 09:28

Yes it is, but the syntax is a little different and you can't pick and choose selectors for each event

$('ul').on({
    mouseenter: function() {
        console.log( "hovered over a LI" );
    }, 
    mouseleave: function() {
        console.log( "mouse left a LI" );
    },
    click: function() {
        console.log( "clicked on a LI" );
    }
}, 'li');

If you really have to filter on different elements for each event you can do something like

$('div').on({
    mouseenter: function(e) {
        if (e.target.tagName.toLowerCase() === 'tr') {
            console.log( "hovered over a TR" );
        }
    },
    mouseleave: function(e) {
        if (e.target.tagName.toLowerCase() === 'div') {
            console.log( "mouse left a DIV" );
        }
    },
    click: function(e) {
        if (e.target.tagName.toLowerCase() === 'TD') {
            console.log( "clicked on a TD" );
        }
    }
});

but that's not really any easier than just doing

$('div').on('mouseenter', 'tr', function() {
     console.log( "hovered over a TR" );
}).on('mouseleave', 'div', function() {
     console.log( "mouse left a DIV" );
}).on('click', 'td', function() {
     console.log( "clicked on a TD" );
});

So basically I'm gonna end up with a lot of code either way I do it. If I can't pick a Selector for each Event I might as well just split up each Event and add multiple Selectors for each. Wish there was a more condensed way of doing it. — CatrPillr, Apr 03 '14 at 09:31
Nope, there's no way to delegate to different selectors for each event inside the same call to `on()`, and that has something to do with how event handlers work. — adeneo, Apr 03 '14 at 09:33
Ah the full Answer wasn't posted when I checked it out. The third option looks great, that looks condensed and neat enough. Thanks a bunch :) I'll accept your answer when it allows me, it's precisely the information I was looking for. — CatrPillr, Apr 03 '14 at 09:34

jQuery event delegation with many events and handlers

1 Answers1