Scribd Logo
Importer

Bienvenue sur Scribd !

  • Eventos en JavaScript

    Transféré par

    Alejandro Guzman
    76 vues11 pages
    Este documento describe los tipos de eventos en JavaScript y los modelos de eventos utilizados por los navegadores. Explica que los eventos permiten la interacción entre el usuario y las páginas web, y que JavaScript puede asignar funciones a los eventos para ejecutar código cuando ocurren. Además, resume los principales eventos definidos por JavaScript y describe los tres modelos de eventos usados por los diferentes navegadores.

    Description originale:

    Eventos

    Titre original

    Investigacion Javascript

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Este documento describe los tipos de eventos en JavaScript y los modelos de eventos utilizados por los navegadores. Explica que los eventos permiten la interacción entre el usuario y las páginas web, y que JavaScript puede asignar funciones a los eventos para ejecutar código cuando ocurren. Además, resume los principales eventos definidos por JavaScript y describe los tres modelos de eventos usados por los diferentes navegadores.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    76 vues11 pages

    Eventos en JavaScript

    Transféré par

    Alejandro Guzman
    Este documento describe los tipos de eventos en JavaScript y los modelos de eventos utilizados por los navegadores. Explica que los eventos permiten la interacción entre el usuario y las páginas web, y que JavaScript puede asignar funciones a los eventos para ejecutar código cuando ocurren. Además, resume los principales eventos definidos por JavaScript y describe los tres modelos de eventos usados por los diferentes navegadores.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 11

    INSTITUTO TECNOLOGICO DE

    TUXTLA GUTIERREZ
    TOPICOS AVANZADOS DE
    PROGRAMACION
    INVESTIGACION DE EVENTOS EN
    JAVASCRIPT

    ING. LUIS ALBERTO RIOS COUTIO


    ALUMNO: ALEJANDRO HERNANDEZ
    GUZMAN
    CARRERA: INGENIERIA EN SISTEMAS
    COMPUTACIONALES

    Tipos de eventos.
    Los eventos hacen posible que los usuarios transmitan informacin a los
    programas. Java script define numerosos eventos que permiten una interaccin
    completa entre el usuario y las paginas/aplicaciones web. La pulsacin de una
    tecla constituye un evento, as como pinchar o mover el ratn, seleccionar un
    elemento de un formulario, redimensionar la ventana del navegador.
    Java Script permite asignar una funcin a cada uno de los eventos. De esta
    forma, cuando se produce un evento, Javascript ejecuta su funcin asociada.
    Cada vez que se produce un evento, se crea un objeto.

    Modelos de eventos
    Crear pginas y aplicaciones web siempre ha sido mucho ms complejo
    de lo que debera serlo debido a las incompatibilidades entre
    navegadores. A pesar de que existen decenas de estndares para las
    tecnologas empleadas, los navegadores no los soportan completamente
    o incluso los ignoran.
    Las principales incompatibilidades se producen en el lenguaje XHTML, en
    el soporte de hojas de estilos CSS y sobre todo, en la implementacin de
    JavaScript. De todas ellas, la incompatibilidad ms importante se da
    precisamente en el modelo de eventos del navegador. As, existen hasta
    tres modelos diferentes para manejar los eventos dependiendo del
    navegador en el que se ejecute la aplicacin.

    1. Modelo bsico de eventos


    Este modelo simple de eventos se introdujo para la versin 4 del
    estndar HTML y se considera parte del nivel ms bsico de DOM.
    Aunque sus caractersticas son limitadas, es el nico modelo que es
    compatible en todos los navegadores y por tanto, el nico que permite
    crear aplicaciones que funcionan de la misma manera en todos los
    navegadores.

    2. Modelo de eventos estndar

    Las versiones ms avanzadas del estndar DOM (DOM nivel 2) definen


    un modelo de eventos completamente nuevo y mucho ms poderoso
    que el original. Todos los navegadores modernos lo incluyen, salvo
    Internet Explorer.

    3. Modelo de eventos de Internet Explorer


    Internet Explorer utiliza su propio modelo de eventos, que es similar
    pero incompatible con el modelo estndar. Se utiliz por primera vez en
    Internet Explorer 4 y Microsoft decidi seguir utilizndolo en el resto de
    versiones, a pesar de que la empresa haba participado en la creacin
    del estndar de DOM que define el modelo de eventos estndar.
    La siguiente tabla resume los eventos ms importantes definidos por
    JavaScript:

    Evento

    Descripcin

    Elementos para los que


    est definido

    Onblur

    Deseleccionar el elemento

    <button>, <input>,
    <label>, <select>,
    <textarea>, <body>

    Onchange

    Deseleccionar un elemento que


    se ha modificado

    <input>, <select>,
    <textarea>

    Onclick

    Pinchar y soltar el ratn

    Todos los elementos

    Ondblclick

    Pinchar dos veces seguidas con


    el ratn

    Todos los elementos

    Evento

    Descripcin

    Elementos para los que


    est definido

    Onfocus

    Seleccionar un elemento

    <button>, <input>,
    <label>, <select>,
    <textarea>, <body>

    Onkeydown

    Pulsar una tecla (sin soltar)

    Elementos de formulario y
    <body>

    Onkeypress

    Pulsar una tecla

    Elementos de formulario y
    <body>

    Onkeyup

    Soltar una tecla pulsada

    Elementos de formulario y
    <body>

    Onload

    La pgina se ha cargado
    completamente

    <body>

    onmousedo
    wn

    Pulsar (sin soltar) un botn del


    ratn

    Todos los elementos

    onmousem
    ove

    Mover el ratn

    Todos los elementos

    Onmouseou
    t

    El ratn "sale" del elemento


    (pasa por encima de otro
    elemento)

    Todos los elementos

    onmouseov

    El ratn "entra" en el elemento

    Todos los elementos

    Evento

    Descripcin

    Elementos para los que


    est definido

    er

    (pasa por encima del elemento)

    Onmouseup

    Soltar el botn que estaba


    pulsado en el ratn

    Todos los elementos

    Onreset

    Inicializar el formulario (borrar


    todos sus datos)

    <form>

    Onresize

    Se ha modificado el tamao de
    la ventana del navegador

    <body>

    Onselect

    Seleccionar un texto

    <input>, <textarea>

    Onsubmit

    Enviar el formulario

    <form>

    Onunload

    Se abandona la pgina (por


    ejemplo al cerrar el navegador)

    <body>

    GENERACION DE EVENTOS

    Pueden producirse cuando interacta con etiquetas, adems hay


    eventos comunes y propios.
    Cuando los eventos tiene lugar, asociado a un elemento HTML de una
    pgina web, se chequea si existen gestores de eventos asociados a ese
    evento. Si la respuesta es si, se les llama en un orden determinado,
    mientras se les enva referencias y otra informacin del evento que ha
    ocurrido. Los gestores de eventos entonces actan sobre ese evento.
    Hay dos tipos de rdenes de invocacin: captura de evento y
    propagacin de evento.
    La captura de eventos comienza con el elemento de ms afuera en el
    rbol DOM, y funciona entrando hacia dentro del elemento HTML. Por
    ejemplo, un click sobre una pgina web primero chequeara el elemento
    HTML en busca de un gestor para el evento onclick, luego sobre
    elemento body, y as, hasta que alcanzase el gestor del evento.
    La propagacin de los eventos trabaja justo de la forma contraria:
    comienza chequeando si el elemento destino del evento tiene asociado
    algn gestor de ese evento, y contina hacia arriba chequeando a los
    respectivos padres de los elementos, hasta que alcanza el elemento
    HTML.

    CONTROL DE EVENTOS
    EL control de eventos es para poder controlar que ocurrir cuando se
    produce

    Ejemplos:
    Al cerrar una pgina se muestra mensaje
    Al pulsar botn se limpian casillas de texto
    MtodosasociadosalaclaseMouseEvent
    getClickCount():Devuelveelnmerodeclicksasociadosconelevento.
    getX():Devuelvelaposicinxdelmousecuandosegeneraunevento.
    getY():Devuelvelaposicinydelmousecuandosegeneraunevento.
    MtodosdelaclaseKeyEvent
    getKeyChar():Devuelveelcarcterasociadoconlateclaqueprodujoelevento.
    getKeyCode():Devuelveelcdigodelateclaqueprodujoelevento.
    getKeyModifiersText(int):Devuelveunacadenaqueindicaelmodificadordelatecla,
    porejemploShift.
    getKeyText(int):Devuelveunacadenaqueindicaeltipodeteclapulsada.Ejmp:F1,
    indicandoqueesunatecladefuncin.
    LasInterfasesdeescucha(EventListeners)
    Parapodercapturartodosloseventos,Javaproporcionalasinterfasesdeescucha
    (listeners).

    Paracadatipodeeventoexisteunainterfasedeescucha.Ejemplo:
    oParaloseventosdetipoActionEventexistelainterfaseescuchaActionListener.
    oParaloseventosdetipoMouseEventexistelainterfaseescucha
    MouseListener.
    MtodosdelaInterfaseMouseListener
    mouseClicked(MouseEvente):cuandosehaceunclickderatn
    mouseEntered(MouseEvente):cuandoelratnentraenlaaplicacin.
    mouseExited(MouseEvente):cuandoelratnsaledelaaplicacin.
    mousePressed(MouseEvente):sehapulsadounbotndelratn.
    mouseReleased(MouseEvente):sehasoltadounbotndelratn.

    MtodosdelaInterfaseWindowListener
    windowActivated(WindowEvente):Esinvocadocuandounaventanaesseteada
    comolaventanaactiva.
    windowClosed(WindowEvente):Esinvocadocuandounaventanahasido
    cerrada.
    windowClosing(WindowEvente):Esinvocadocuandoelusuariointentacerrarla
    ventana.
    windowDeactivated(WindowEvente):Esinvocadocuandolaventanadejadeser
    laventanaactiva.
    windowDeiconified(WindowEvente):Esinvocadocuandounaventanapasade
    estadominimizadoanormal
    windowIconified(WindowEvente):Esinvocadocuandounaventanavaestado
    normalaminimizada.
    windowOpened(WindowEvente):Esinvocadolaprimeravezquelaventanase
    hacevisible.
    MtododelaInterfaseActionListener
    actionPerformed(ActionEvente):Esinvocadocuandounaaccinocurre,como
    presionarunbotn.
    VerConvertMiles.javayHideAndSeek.java

    CREACION DE EVENTOS

    Para la creacin de eventos se necesita realizar diferentes cdigos , ya


    que de esa manera se podrn manipular los eventos.
    Parapoderutilizarloseventosgeneradosporprogramaconlastcnicasquesevana
    describir,sernecesariodefinirunaclasequeseacapazdegenerarestetipodeeventos.

    AqusecentrarelestudioenloseventosdetipoAction,aunquenohayraznalgunapara
    quelamismatcnicaseapliqueaeventosdebajonivelcomopuedanserloseventosde
    ratnodelteclado.
    LaclaseencuestindebeserunasubclasedeComponenty,almenos,debeincluirlos
    siguientestresmiembros:
    UnavariabledeinstanciaqueesunareferenciaalalistadeobjetosListener
    registrados.
    Unmtodoparacrearlalistaanterior,queenelejemploesgeneraListaReceptores(),
    quesellamaasparailustrarqueelnombrenoestcnicamenteimportante,aunque
    porconsistenciaconladocumentacindelModelodeDelegacindeEventos,debiera
    llamarseaddActionListener().Estalistahadesergeneradaatravsdeunallamadaal
    mtodoAWTEventMulticaster.add(),quedevuelveunareferenciaalalista.
    Unmtodoqueinvocaralmtodocorrespondientealtipodeeventoenlaclase
    Listenerdelalistadeobjetosreceptoresdeloseventos.Enelejemplo,losobjetos
    receptoressondetipoActionListener,asqueelmtodoencuestines
    actionPerformed(),yelmtodoqueloinvocaesgeneraEventoAction().Eneste
    ejemplosolamentehayunobjetoreceptor,luegoseverotroenelquehabrvarios
    objetosreceptoresdeestetipodeeventosenlalista.

    onClick
    <html>
    <head>
    <title>Ejemplo onClick</title>
    </head>
    <body>
    <center>
    <input type="button" value=" Pulsar boton para saludo... "
    onClick="window.alert('Hola mundo!')";>
    </center>
    </body>
    </html>

    onLoad
    <html>
    <head>
    <title>Ejemplo onLoad</title>
    </head>
    <body

    onLoad="boton.value='hola!'">

    <center>
    <input type="button" name="boton" value="" onLoad = "
    value= 'hola mundo!' ">
    </center>
    </body>
    </html>

    onFocus
    <html>
    <head>
    <title>Ejemplo onFocus</title>
    </head>
    <body>
    <center>
    <input type=text" value=" Al coger foco muestra mensaje... "
    onFocus="window.alert('Hola mundo!')";>
    </center>
    </body>
    </html>
    onResize
    <html>

    <head>
    <title>Ejemplo onLoad</title>
    </head>
    <body onResize="alert('Hola mundo');">
    </body>
    </html>
    De esa manera podemos crear los eventos en JavaScript.
    Los eventos en javascript permiten al programador ms flexibilidad a la
    hora de validar datos y restringir movimientos de usuario.

    Vous aimerez peut-être aussi