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"。您使用的自定义事件越多越有意义。

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

2 个答案: