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

Question

我想在jQuery中创建一个自定义事件，以捕获按键事件中的ENTER键，这样我就不必每次都进行编码：

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

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

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

- Ovesh

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

你可以在这里测试它。

- Nick Craver

---

谢谢！还有，这是我第一次听说jsfiddle.com。非常方便。 - Ovesh

Answer 2

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

使用命名空间事件名称是一个好主意，可以减少与其他使用自定义事件的jQuery代码意外冲突的机会。因此，您可以使用"enter.mywebapp"或类似的内容来代替"enter"。使用更多自定义事件时，这种做法更有意义。

- Tomalak

---

命名空间在事件名称之后，例如 "enter.mywebapp" :) - Nick Craver