Los eventos en jquery se manejan o capturan de manera muy sencilla, desde la manera mas general hasta la manera mas especifica ejemplo
|
1 2 3 |
$("table tr").click(function(){ }); |
Estamos Accediendo a evento click de todas las filas de las tablas que existan en la pagina, también podemos ser un poco mas específicos:
|
1 2 3 |
$("table#mitabla tr").click(function(){ }); |
accedemos solamente a las filas de la tabla con identificador mitabla, podemos accedes también mediante la clase del objeto, incluso con atributos menos específicos como el nombre
|
1 2 3 |
$("input[name=evento-click]").click(function(){ }); |
en este caso estamos accediendo al input con nombre evento-click.
algunos otros ejemplos con varios tipos de eventos son
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
$("input[name=evento-click]").keyup(function(e){ alert("Presionaste la tecla "+ e.keyCode) }); $("input[name=evento-click]").keypress(function(e){ alert("Presionaste la tecla "+ e.keyCode) }); $("input[name=evento-click]").keydown(function(e){ alert("Presionaste la tecla "+ e.keyCode) }); // //ESTE ES EL EVENETO HOVER Y MOUSEOUT // $("button#evento-hover").hover(function(){ $("#a-hover").addClass("btn-danger") $(this).text("Tengo Mouse sobre Me"); //alert() }); $("button#evento-hover").mouseout(function(){ $(this).text("Se fue el Mouse"); $("#a-hover").removeClass("btn-danger") //alert() }); // //ESTE ES EL EVENETO FOCUS Y FOCUSOUT // $("input[name=evento-focus]").focus( function(){ $("#a-focus").addClass("btn-danger") $(this).val("Tengo el Foco") }); $("input[name=evento-focus]").focusout( function(){ $(this).val("Ya no tengo el Foco") $("#a-focus").removeClass("btn-danger") }); // //ESTE ES EL EVENETO CHANGE // $("select#evento-change").change( function(){ $("input[name=evento-change]").val("El valor del selec cambio a " + $(this).val()); }); |
Eventos de elementos Agregados Dinamicamente
Los eventos se capturan de la siguiente manera
link del proyecto:
https://drive.google.com/file/d/0B3fNRvDCyakCS2l1SUx6RXZyMlU/view?usp=sharing