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

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

1 个答案: