Mapa mental

EVENTOS

Carol Monrroy Español

Contenido del mapa

EVENTOS

¿QUÉ SON?
- Los eventos de JavaScript permiten la interacción entre las aplicaciones JavaScript y los usuarios.
  - Cada vez que se pulsa un botón, se produce un evento.
  - Cada vez que se pulsa una tecla, se produce un evento.
  - Para que se produzca un evento no es necesario que intervenga el usuario.
  - cada vez que se carga una página, también se produce un evento.
TIPOS DE EVENTOS
- Eventos mas usados en paginas web
  - Para esperar a que se cargue la página
    - onload
  - Para controlar el ratón
    - onclick,
    - onmouseover
    - onmouseout
  - Para controlar el envío de los formularios.
    - onsubmit
- MANEJADORES DE EVENTOS
  - Un evento de JavaScript carece de utilidad
    - Se deben asociar funciones
    - Se debe asociar código JavaScript a cada evento.
    - Las funciones o código JavaScript
      - Se denominan manejador de eventos (event handlers en inglés)
  - •Manejadores como atributos de los elementos XHTML.
    - Es un metodo mas sencillo y a la vez menos profesional
    - Ejemplo
      - Se quiere mostrar un mensaje Cuando el usuario pinche con el ratón sobre un botón:
        <input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />
        Para definir este evento se incluye el atributo llamado onclick.
      - Este otro ejemplo incluye una de las instrucciones más utilizadas en las aplicaciones JavaScript más antiguas:
        <body onload="console.log('La página se ha cargado completamente');"> ...</body>
        Para definir este evento se incluye el atributo llamado onload
        El mensaje anterior se muestra después de que la página se haya cargado completamente,
    - Se definen atributos XHTML con el mismo nombre que los eventos que se quieren manejar.
  - •Manejadores como funciones JavaScript externas.
    - En las funciones externas no es posible utilizar la variable this como en los manejadores insertados en los atributos XHTML.
      - Es necesario pasar la variable this como parámetro a la función manejadora
  - •Manejadores "semánticos"
    - La técnica de los manejadores semánticos consiste en:
      - Asignar un identificador único al elemento XHTML mediante el atributo id.
      - Crear una función de JavaScript encargada de manejar el evento.
      - Asignar la función a un evento concreto del elemento XHTML mediante DOM.
  - Manejadores de eventos y variable this
    - JavaScript define una variable especial llamada this
      - Se crea automáticamente
      - Se emplea en algunas técnicas avanzadas de programación.
      - Se puede utilizar la variable this para referirse al elemento XHTML que ha provocado el evento.
      - Ejemplo
        Cuando el usuario pasa el ratón por encima del <div>, el color del borde se muestra de color negro. Cuando el ratón sale del <div>, se vuelve a mostrar el borde con el color gris claro original.
        Para definir este evento se incluye el atributo llamado onmouseover
TIPOS DE EVENTOST
- EVENTOS DE RATÓN
  - Se originan cuando el usuario emplea el ratón para realizar algunas acciones.
    - PROPIEDADES
      - Las coordenadas del ratón (todas las coordenadas diferentes relativas a los distintos elementos)
      - La propiedad type
      - La propiedad srcElement (Internet Explorer) o target (DOM)
      - Las propiedades shiftKey, ctrlKey, altKey y metaKey (sólo DOM)
      - La propiedad button (sólo en los eventos mousedown, mousemove, mouseout, mouseover y mouseup
- EVENTOS DE TECLADO
  - Se originan cuando el usuario pulsa sobre cualquier tecla de su teclado.
    - PROPIEDADES
      - La propiedad keyCode
      - La propiedad charCode (sólo DOM)
      - La propiedad srcElement (Internet Explorer) o target (DOM)
      - Las propiedades shiftKey, ctrlKey, altKey y metaKey (sólo DOM)
- EVENTOS HTML
  - Se originan cuando se producen cambios en la ventana del navegador o cuando se producen ciertas interacciones entre el cliente y el servidor.
    - Uno de los eventos más utilizados es el evento load
    - Todas las manipulaciones que se realizan mediante DOM requieren que la página esté cargada por completo
- EVENTOS DOM
  - Se originan cuando se produce un cambio en la estructura DOM de la página. También se denominan "eventos de mutación".
    - Eventos
      - DOMSubtreeModified
      - DOMNodeInserted
      - DOMNodeRemoved
      - DOMNodeInsertedIntoDocument
EL FLUJO DE EVENTOS o "event flow"
- EVENT BUBBLING
  - El primer evento que se tiene en cuenta es generado por el <div> que contiene el mensaje.
  - A continuación el navegador recorre los ascendentes del elemento hasta que alcanza el nivel superior(document)
  - Incluye el navegador Internet Explorer.
- EVENT CAPTURING
  - Se define desde el elemento menos específico hasta el elemento más específico.
  - Es el contrario al "event bubbling"
  - Este modelo lo utilizaba navegador Netscape Navigator 4.0.
- EVENTOS DOM
  - Soporta tanto el bubbling como el capturing
    - "Event capturing" se ejecuta en primer lugar.
    - Los dos flujos de eventos recorren todos los objetos DOM desde el objeto document hasta el elemento más específico y viceversa
- Permite que varios elementos diferentes puedan responder a un mismo evento.
- Ejemplo
  - Cuando el usuario pulsa sobre el botón, el navegador permite asignar una función de respuesta al botón, otra función de respuesta al <div> que lo contiene y otra función de respuesta a la página completa.
  - Un solo evento (la pulsación de un botón) provoca la respuesta de tres elementos de la página (incluyendo la propia página)
HANDLERS Y LISTENERS
- MANEJADORES DE EVENTOS DE DOM
  - La especificación DOM define otros dos métodos similares a los disponibles para Internet Explorer
    - Denominados addEventListener() y removeEventListener()
      - Para asociar y desasociar manejadores de eventos.
    - Se requieren tres parámetros
      - El nombre del "event listener"
      - Una referencia a la función encargada de procesar el evento
      - El tipo de flujo de eventos al que se aplica.
- Se vieron tres formas de definir los manejadores de eventos para el modelo básico de eventos
  - Código JavaScript dentro de un atributo del propio elemento HTML
  - Definición del evento en el propio elemento HTML pero el manejador es una función externa
  - Manejadores semánticos asignados mediante DOM sin necesidad de modificar el código HTML de la página
  - Cualquiera de estos tres modelos funciona en todos los navegadores disponibles en la actualidad
EL OBJETO EVENT
- PROPIEDADES Y MÉTODOS
  - PROPIEDADES DEFINIDAS POR DOM
    - Al contrario de lo que sucede con Internet Explorer, la mayoría de propiedades del objeto event de DOM son de sólo lectura.
    - Las siguientes propiedades son de lectura y escritura
      - AltKey, Button y KeyCode.
  - El mecanismo definido por los navegadores para el objeto event es similar
    - Existen numerosas diferencias en cuanto las propiedades y métodos del objeto
- SIMILITUDES Y DIFERENCIAS ENTRE NAVEGADORES
  - SIMILITUDES
    - En ambos casos se utiliza la propiedad type para obtener el tipo de evento
    - El uso de la propiedad keyCode para obtener el código correspondiente al carácter de la tecla que se ha pulsado
    - Una forma de comprobar si se han pulsado algunas teclas especiales, es utilizar las propiedades
      - shiftKey, altKey y ctrlKey.
  - DIFERENCIAS
    - La forma en la que se obtiene el elemento que origina el evento.
      - Si un elemento <div> tiene asignado un evento onclick, al pulsar con el ratón el interior del <div> se origina un evento cuyo objetivo es el elemento <div>.
    - La relativa a la obtención del carácter correspondiente a la tecla pulsada.
      - Cada tecla pulsada tiene asociados dos códigos diferentes
        El primer código es un código de tecla interno para JavaScript
        El segundo código coincide con el código ASCII del carácter
        Internet Explorer
        El contenido de la propiedad keyCode depende de cada evento.
        En los eventos de "pulsación de teclas" (onkeyup y onkeydown) su valor es igual al código interno.
        En los eventos de "escribir con teclas" (onkeypress) su valor es igual al código ASCII
- Cuando se produce un evento, no es suficiente con asignarle una función responsable de procesar ese evento.
  - El objeto event proporciona toda esa información
- Crea automáticamente cuando se produce un evento y que se destruye de forma automática cuando se han ejecutado todas las funciones