Scribd Logo
Carica

Benvenuto in Scribd!

  • Eventos en JavaScript

    Caricato da

    Jose Hernandez
    163 visualizzazioni5 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    163 visualizzazioni5 pagine

    Eventos en JavaScript

    Caricato da

    Jose Hernandez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    Eventos en JavaScript

    En JavaScript, la interaccin con el usuario se consigue mediante la captura de los eventos que ste produce. Un evento es una accin del usuario ante la cual puede realizarse algn proceso (por ejemplo, el cambio del valor de un formulario, o la pulsacin de un enlace). Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos. La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versin a partir de la cual estn soportados y su significado Manejador onAbort onBlur onChange onClick onDblClick onDragDrop onError onFocus onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut Versin 1.1 1.0 1.0 (1.1 para FileUpload) 1.0 1.2 (no en Mac) 1.2 1.1 1.1 (1.2 para Layer) 1.2 1.2 1.2 1.0 (1.1 para image) 1.2 1.2 1.1 Se produce cuando... El usuario interrumpe la carga de una imagen Un elemento de formulario, una ventana o un marco pierden el foco El valor de un campo de formulario cambia Se hace click en un objeto o formulario Se hace click doble en un objeto o formulario El usuario arrastra y suelta un objeto en la ventana La carga de un documento o imagen produce un error Una ventana, marco o elemento de formulario recibe el foco El usuario pulsa una tecla El usuario mantiene pulsada una tecla El usuario libera una tecla El navegador termina la carga de una ventana El usuario pulsa un botn del ratn El usuario mueve el puntero El puntero abando una rea o enlace

    onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit onUnload Ejemplo de evento:

    1.0 (1.1 para area) 1.2 1.2 1.1 1.2 1.0 1.0 1.0

    El puntero entra en una rea o imagen El usuario libera un botn del ratn Se mueve una ventana o un marco El usuario limpia un formulario Se cambia el tamao de una ventana o marco Se selecciona el texto del campo texto o rea de texto de un formulario El usuario enva un formulario El usuario abandona una pgina

    <INPUT TYPE="text" onChange="CompruebaCampo(this)"> En este ejemplo, CompruebaCampo() es una funcin JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la funcin (en este caso, el campo del formulario). La siguiente tabla muestra los eventos que pueden utilizarse con los objetos del modelo de objetos JavaScript del Navigator. Manejador de evento onAbort onBlur Objetos para los que est definido Image Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window FileUpload, Select, Text, Textarea Button, document, Checkbox, Link, Radio, Reset, Submit document, Link window Image, window Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window document, Image, Link, Textarea document, Image, Link, Textarea document, Image, Link, Textarea Image, Layer, window

    onChange onClick onDblClick onDragDrop onError onFocus

    onKeyDown onKeyPress onKeyUp onLoad

    onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit onUnload

    Button, document, Link Ninguno (debe asociarse a uno) Layer, Link Layer, Link Button, document, Link window Form window Text, Textarea Form window

    Los siguientes mtodos de evento pueden utilizarse en JavaScript:

    Mtodos de evento blur() click() focus() select() submit()

    Funcin que realizan Elimina el foco del objeto desde el que se llame Simula la realizacin de un click sobre el objeto desde el que se llame Lleva el foco al objeto desde el que se llame Selecciona el rea de texto del campo desde el que se llame Realiza el envo del formulario desde el que se llame

    Ejemplo:
    <HTML> <HEAD><TITLE>Eventos</TITLE> <SCRIPT> <!-function Reacciona(campo) { alert("Introduzca un valor!") campo.focus() } //--> </SCRIPT></HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text NAME=campo onFocus="Reacciona(this)"> </FORM> </BODY> </HTML>

    Se usan como atributos del tag <BODY> de HTML. Ejemplo:


    <BODY onLoad="Hola()" onUnload="Adios()">

    La funcin Hola() se ejecutar antes de que se cargue la pgina y la funcin Adios() al abandonarla.

    Ejemplo:
    <HTML> <HEAD> <TITLE>Ejemplo onLoad y onUnload</TITLE> </HEAD> <BODY onLoad="alert('Bienvenido a mi pgina!')" onUnload="alert('Vuelva pronto!')"> ... </BODY> </HTML>

    Vamos a ver un ejemplo para un campo de texto: <INPUT TYPE=text NAME="test" onBlur="alert('Gracias!')" onChange="Comprueba(this)">

    En este ejemplo, simulamos una calculadora interactiva: <HTML> <HEAD><TITLE>Calculadora interactiva</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function Calcula(form) { form.resultados.value = eval(form.entrada.value) } function CogeExpresion(form) { form.entrada.blur() form.entrada.value = prompt("Introduce una expresin matemtica vlida en JavaScript","") Calcula(form) } //--> </SCRIPT></HEAD> <BODY> <FORM METHOD=POST> Calculadora interactiva: <INPUT TYPE=text NAME="entrada" VALUE="" onFocus="CogeExpresion(this.form)"> <BR>El resultado es:<INPUT TYPE=text NAME="resultados" VALUE="" onFocus="this.blur()"> </FORM> </BODY> </HTML>

    Potrebbero piacerti anche