带有许多事件和处理程序的 jQuery 事件委托

Question

我的问题与空间和可读性有关，但我开始了。

我需要使用事件委托来让动态添加的元素与我的 jQuery 函数一起使用。但是，我希望结合两种处理事件的方式。基本上我想要这个：

$("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" );
    }
});

但我想使用事件委托并为每个事件设置选择器：

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

结论：使用第一个示例时是否可以进行事件委托？ 我想要的示例：

$("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" );
    }
});

Answer 1

是的，但是语法有点不同，你不能为每个事件挑选选择器

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

如果您真的必须为每个事件过滤不同的元素，您可以执行类似的操作

$('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" );
        }
    }
});

但这并不比做起来容易

$('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" );
});