parctica load

AJAX CON JQUERY

h2

div

texto del articulo

Eventos JQUERY

OBJETO EVENTO

Un evento es un objeto para java script y como tal tiene sus propiedades y métodos:

Propiedades

• target: nos regresa el elemento del DOM que dispara nuestro evento.
• clientX: es el punto x donde nos encontramos.
• clientY: es el punto y donde nos encontramos.
• data: Dato trasmitido al evento utilizando la función bind().

Métodos

• sotpPropagation: Evitará la propagación de eventos por el resto de objetos situados en el mismo lugar. Por ejemplo si le decimos que se desencadene el evento tras hacer click en la imagen debemos de tener en cuanta que la imagen pertenece a body que a su vez pertenece al document que a su vez pertenece al html. Tu puedes haber generado un evento para el documento y otro para la imagen. En el siguiente código la imagen responderia al click del body y al click de la imagen.

  $(document).click(function(){
    alert("Body");
  });
  $("img").click(function(){
    alert("Imagen");
  });

  
  El mismo código utilizando stopPrapagation() solo responderá a la imagen:

  $(document).click(function(){
    alert("Body");
  });
  $("img").click(function(e){
    e.stopPropagation();
    alert("Imagen");
  });

  
  
• preventDefault: Detiene el comportamiento determinado del elemento. Imagina que tu tienes un botón con una etiqueta <a> dentro, si tu haces doble click por defecto te llevara a la dirección que tenga en el atributo href, utilizando preventDefault evitará que al hacer doble click te redireciona.
• which: Nos regresa un número entero que representa un número unicode que representa la tecla presionada por un keypress

En el siguiente ejercicio utilizamos las propiedades clientX y clientY para ver en que punto de la pagina haces click.

En el siguiente ejemplo creamos una imagen svg con un circulo que seguira el raton. Cuando arrastremos el ratón dentro del svg el circulo irá tras nuestro ratón.

Ejemplo del uso del método stopPropagation, para evitar propagación de eventos

Eventos

Un evento es un desencadenante de una acción (cargarse la pagina, salir de la página, hacer click en un punto, mover el ratón, pasar el ratón por un objeto, pulsar intro...). Una acción es lo que ocurre una vez sucede el evento.

Podemos traducir evento algo que hace un objeto(página, ratón, teclado,formulario) y acción como la qué es lo que pasa cuando luego.

Ejm Cuando hagamos click en una etiqueta a nos llevará a otro pagina. En este caso el evento es hacer click y el evento desencadenado es ir a la pagina xxx.

Los eventos pueden ser de varios tipos:

• Eventos de ratón:
  • click
  • dbclick
  • mousedown
  • mouseup
  • mouseover
  • mousemove
  • mouseenter
  • mouseeleave
• Eventos de teclado:
  • keypress
  • keydown
• Eventos de documento o ventana:
  • load
  • resize
  • scroll
  • unload
• Eventos de formulario:
  • submit
  • reset
  • change
  • focus
  • blur

Eventos JQuery

Podemos utilizar los evento en jquery de dos formas:

1. Pasarle una función por parámetros al evento.

   $("div").click(myfuncion);
   fuction myfuncion(){...code...}

2. Crear una función anónima: $("div").click(function(){....code....});

Ejemplo de eventos con Jquery

EVENTOS JQUERY CON FUNCIÓN toggle() Y hover()

Utilizaremos estas funciones para realizar acciones con los eventos hover y click.

Función hover( cursorInside , cursorOut )

La función hover() desencadenará una acción cuando entre el cursor en el elemento y otra cuando salga de él.

Función toggle()

Lo utilizaremos para trabajar con el evento click, con el aparecerá y desaparecerá nuestro elemento cada vez que hagamos click. Se puede utilizar si queremos hacer una etiqueta <details> personalizada.

Ejemplo de menú con toggle:

Ejemplo de details con imagen personalizada utilizando la función toggle

Funciones next(), bind() on()

next("objeto")

La función next("objeto") nos ayudará a apuntar al próximo objeto que determinemos dentro del actual. Por ejemplo Si le decimos $("article").next("p") apuntará a la primera etiqueta p de cada articulo.

bind("desencadenanteEvento", data, open)

La función bind está en desuso actualmente utilizaremos .on("eventos", acción).

Si deseamos que un obejeto responda a dos o mas eventos (click, hover..) y al responder a ellos desencadene la misma función podemos utilizar bind().

Hasta el momento teniamos que hacer lo siguiente: $("p").click(funcionA).hover(funcionA)

Con bing lo podemos hacer bind("click hover", data, miFuncion)

data será un dato o variable con un dato que le pasamos a nuestra variable

.on("evento/os", funciónAcciónDesencadenada)

En los eventos podemos poner tantos eventos como deseemos que desencadenen nuestra acción, para ello los nombraremos separados con espcacios:

Ejm de múltiples eventos

.on("click dbclick scroll", funciónAcciónDesencadenada)

Ejemplo de eventos con diferentes funciones:

$('.h2').on({ click:hacerclick, mouseover: hacerhover});

function hacerclick(e) {
    e.preventDefault();
    console.log('has hecho click');
}
function hacerhover() {
    console.log('pasó el ratón');
}
                                    

Delegación de eventos

La delegación de eventos es una propiedad del objeto evento que nos puede resultar muy util para identificar el elemento del DOM que dispara el evento y sus atributos. Saviendo este dato podremos solicitar su modificación posterior mente.

En este ejemplo utilizamos la funcion .on() y le indicamos en primer lugar el elemento padre desde el que deseamos empezar la búsqueda $("ElementoPadre") y dentro de la función on le pasaremos por parámetros, los eventos desencadenantes de la acción, el hijo que debe identificarnos y por ultimo acción que desencadena.

$("ElementoPadre").on("eventos","ElementoHijo", function(){ $(this).attr("id") });

En el siguiente ejemplo nos regresará por consola la propiedad class de cada objeto del DOM por el que pasemos el ratón.

$("*").hover(function(e){console.log(e.target.className);});

Ejemplo de función next()

See the Pen función next() de JQ by CVDGP (@cvdgp) on CodePen.

Ejemplo de función .on("evento/s", acción):

En el siguiente ejemplo crearemos dos imágenes, cuando hagamos click o carguemos la página copiara la ruta de la imagen1 y se la dará a la imagen 2, poniendola visible (Show), cuando pasemos el ratón por la imágen 2 esta desaparecerá, utilizaremos el método stopPropagation() del objeto evento para evitar que se propague en otro objetos como el body: