如何在jQuery中创建自定义onEnter事件？

Question

我想创建jQuery的自定义事件捕获ENTER onkeypress事件的事件，这样我就不必每次都这样的代码：

if(e.keyCode == 13) { 
    // event code here 
} 

换句话说，我希望能够代码像这样：

$("selector").bind("enter", function(){ 
    // event code here 
}); 

Answer 1

现代的jQuery（1.7以上）使用.on()结合事件处理程序：

// delegate binding - replaces .live() and .delegate() 
$(document.body).on("keyup", ":input", function(e) { 
    if(e.which == 13) 
    $(this).trigger("enter"); 
}); 

// direct binding - analogous to .keyup() 
$(":input").on("keyup", function(e) { 
    if(e.which == 13) 
    $(this).trigger("enter"); 
}); 

旧版本的jQuery使用下列方法中的一个。对于所有元素，您可以有一个.live()或.delegate()事件处理程序。然后用它来触发您的自定义事件，像这样：

$(document.body).delegate(":input", "keyup", function(e) { 
    if(e.which == 13) 
    $(this).trigger("enter"); 
}); 

不适合你可以做正是你所拥有的任何:input元素：

$("selector").bind("enter", function(){ 
    //enter was pressed! 
}); 

You can test it out here。

Answer 2

$("selector").keyup(function (e) { 
    if (e.keyCode == 13) { 
    $(this).trigger("enter"); 
    } 
}).bind("enter", function() { 
    // event code here 
}); 

它是使用命名空间中的事件名称，以减少意外与使用自定义事件等jQuery代码冲突的机会是一个好主意。所以，而不是"enter"你可以使用"enter.mywebapp"或类似的东西。使用越多的自定义事件越有意义。