1 / 14

Eventos

Eventos.

ron
Télécharger la présentation

Eventos

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Eventos

  2. Los eventos son uno de los elementos más importantes en el desarrollo de aplicaciones web enriquecidas del lado del cliente, puesto que sirven para realizar acciones en la página a medida que el usuario realiza cosas con la página. Es decir, son la base para crear la interacción con el usuario. jQuery Page 2

  3. Con jQuery podemos implementar todos los eventos que existen en Javascript, y alguno un poco más evolucionado, para los que hay una función propia para cada uno. jQuery Page 3

  4. Eventos Relacionados con el Ratón jQuery Page 4

  5. Eventos Relacionados con el Teclado jQuery Page 5

  6. Eventos Combinados jQuery Page 6

  7. Eventos Combinados jQuery Page 7

  8. Ejemplos <!DOCTYPE html><html><head>  <style>  p { margin: 4px; font-size:16px; font-weight:bolder;cursor:pointer; }  .blue { color:blue; }  .highlight { background:yellow; }  </style>   <script src="http://code.jquery.com/jquery-latest.js"></script> • <script>    $("p").click(function () {      $(this).toggleClass("highlight");    }); </script> </head><body>  <p class="blue">Clicktotoggle</p>  <p class="bluehighlight">highlight</p>  <p class="blue">onthese</p>  <p class="blue">paragraphs</p></body></html> toggleClass() Permite conmutar clases, de forma, que si el elemento tiene ya la clase, la elimina y viceversa. jQuery Page 8

  9. Manejadores de Eventos jQuery provee métodos para asociar controladores de eventos (en inglés eventhandlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste jQuery Page 9

  10. Manejadores de Eventos La función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles: jQuery Page 10

  11. Ejemplo <!DOCTYPE html><html><head>  <style> body { background-color: #eef; }div { padding: 20px; } </style>  <script src="http://code.jquery.com/jquery-latest.js"></script> • <script> • $(document).mousemove(function(e){ • $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); }); • </script> </head><body>  <div id="log"></div></body></html> jQuery Page 11

  12. .bind() Este método es uno de los principales de jQuery. Básicamente nos permite asociar funciones a eventos de elementos tanto del DOM como del navegador $(document).ready(function(){ $("a").bind(“click”, function(event){ alert("Este mensaje se muestra cuando el usuario da click en el enlace"); event.preventDefault(); }); }); preventDefault() permite bloquear el comportamiento por default, en este caso, de los enlaces jQuery Page 12

  13. .bind() Usando bind podemos, desde asociar varios eventos simultáneamente $('#foo').bind({ • click: function() { • // Hacer algo en el click • }, • mouseenter: function() { • // Hacer algo en el mouseenter • } }); jQuery Page 13

  14. Tarea jQuery Page 14

More Related