jquery 何时使用 .on 方法

Question

我有这个功能：

$(".divbody tbody tr td").keydown(function (e) {                
            var $this = this;           
            KeyCheck($this, e);
            return false;
});

基本上，我将keydown事件附加到表中的单元格（以使用箭头键进行导航）.divBody 是表的类名。 它正在按预期工作。

1）这是将处理程序附加到单元格的正确方法吗？

2）我对何时应该使用.on方法感到困惑。 我是否应该避免上述情况并改用以下内容：

$( ".divbody" ).on( "keydown", "tbody tr td", function(e) {  
            var $this = this;           
            KeyCheck($this, e);
            return false;
        });

提前感谢！

Answer 1

jQuery的.on事件绑定侦听器的方式是，如果你将一个元素添加到document，它仍然会触发。 如果像第一个示例一样将其添加到对象中，它将仅绑定到现有元素，因此，如果您添加新元素，它将不会为它们触发。

因此，使用哪一个的问题归结为您是否将新的td添加到table以及是否需要为它们处理键控。 如果您不是，则不需要能够添加新的td，使用第一个选项总体性能会稍微好一些。

Answer 2

在第二个示例中，您使用的是事件委派。 .divbody的任何td元素子元素都将调用处理程序。

它类似于live的工作方式，这意味着尚未创建的未来子元素仍将触发已处理的事件。

见 http://api.jquery.com/on/

例如

$(".mytable td").click(function(e) { alert('cell clicked'); });

将仅设置为已存在的元素的处理程序。

$(".mytable").on('click','td', function(e) {alert('cell clicked'); });

会为尚未添加到 DOM 中的 TD 元素触发

但是，如果您的所有元素都已经在 DOM 中，您可以坚持使用您的第一个示例。