¿Cómo creo un evento onEnter personalizado en jQuery?

Question

Me gustaría crear un evento personalizado en jQuery que captura ENTER eventos OnKeyPress, por lo que no tendría que codificar esta manera cada vez:

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

En otras palabras, me gustaría ser capaz de código de esta manera:

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

Answer 1

jQuery Modern (1,7 y hasta) utiliza .on() de obligar a los controladores de eventos:

// 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"); 
}); 

Mayor versiones de jQuery utilizan uno de los métodos siguientes. Puede tener un solo controlador de eventos .live() o .delegate() para todos los elementos. A continuación, utilizar eso para provocar que su evento personalizado, así:

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

No para cualquier elemento :input que podría hacer exactamente lo que tiene:

$("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 
}); 

es una buena idea usar nombres de eventos de espacios de nombres, para reducir el riesgo de accidente chocando con otro código jQuery que utiliza los eventos personalizados. Entonces, en lugar de "enter", puede usar "enter.mywebapp" o algo similar. Cuanto más sentido tiene, más eventos personalizados usas.