如何在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"或類似的東西。使用越多的自定義事件越有意義。