Foros del Web - Ver Mensaje Individual - ¿donde puedo encontrar todas las propiedades de los eventos en javascript como stop()

Raziel_Ravenheart · #2 (**permalink**) 22/10/2011, 17:33

Podrías mostrarme el enlace de la marquesina?

Ahora si la respuesta:

En javascript, existen eventos y manejadores de eventos, aparte de eso existen los métodos, y los disparadores de eventos. los eventos, son solo el concepto de la acción contenidos en el nombre, como por ejemplo:

click = oprimir alguno de los botones del mouse, casi todos los elementos soportan este evento

dbclick = doble click rápido

mousedown = cuando se oprime el botón del mouse, cualquiera, es solo la parte que se oprime y listo.

mouseup = antecedido del mousedown, sigue este, cuando se suelta el botón del mouse

load = cuando carga una ventana, documento o imágen, solo se puede aplicar a window, body e img, ninguna otra etiqueta genera este evento, y no creo que haya forma de forzarlo, como otros eventos, ya sea el click, keypress, focus, entre otros

focus = cuando se enfoca algún elemento, es decir, se hace click en este y se puede modificar su contenido, el focus es enfocar un objeto. Controles de formulario como botones, cajas de texto, select, input como cajas de chequeo o radio.

blur = cuando se pierde el foco de un objeto, es decir, cuando ya no está escogido un elemento y se pasa al siguiente, esto se hace con tab, o simplemente haciendo click en cualquier lado de la página. Los elementos que soportan el evento focus, soportan este evento.

change = cuando el contenido de algún control como cajas de texto, select, textarea, cambia, se registra este evento, solo algunos elementos como los que te nombre soportan este evento y se ejecuta a veces después de otro evento como el keyup (se suelta una tecla) o blur

keypress = cuando se oprime y suelta una tecla

keydown = cuando se oprime y deja oprimida una tecla

keyup = cuando se suelta una tecla...

Como podrás deducir no todos los eventos se pueden aplicar a todos los elementos, pero hay excepciones como en todo. Por otro lado, hay otros eventos avanzados que luego los verás, por eso, al examinar una lista completa, no podrás hacerlo de la manera correcta, por que no podrás saber exactamente que eventos son aceptados por cuales elementos. La mejor manera de conocer los eventos, funciones y atributos es revisando elemento por elemento de los que existen en html, es decir, aprendiendo DOM.

DOM es una api (application programming interface, interfaz de programación de aplicaciones), que está disponible para todos los lenguajes de script que interactuen con el navegador es decir javascript y VBScript. DOM define el modelo de los objetos en un documento HTML y aparte de eso un grupo de reglas para interactuar con estos. Este grupo de reglas están compuestas por lo que te he venido repitiendo desde hace rato, y no me canso, por que me gusta

, así aprendí, estas reglas son propiedades, eventos, los manejadores de eventos que de cierto modo son propiedades y los métodos de cada elemento.

Los manejadores de eventos, son los tipicos on<nombre_evento>, y se acceden como propiedades de un objeto en javascript, por eso digo que de cierto modo son propiedades, y algunos programadores de antaño, se refieren a estos manejadores como propiedades de evento. Entonces, si tomas todos los eventos que te expliqué, y le añades on, tendrás los manejadores de eventos. Sobra decir que hay más:

onclick
ondbclick
onmousedown
onmouseup
onload; De nuevo te recuerdo q este solo se aplica a window, body e img.
onfocus
onblur
onchange
onkeypress
onkeydown
onkeyup

aparte de esto están las propiedades básicas de un elemento, por ejemplo, una propiedad que pueden tener vacia o no todos los elementos es el id. Otras propiedades o atributos serían name, style, class, en el caso de la etiqueta input el atributo type, que es propio de esta.

Hay algunos atributos libres, o autodeclarativos que antes con html, se podían utilizar solos o minimizados, pero si estás utilizando un encabezado de xhtml como

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

estas obligado a utilizarlos de modo que sean válidos según el dtd (document type definition), estas
estos atributos son algunos como disabled, checked, readonly, es decir, antes con html, se podía hacer así:

Código HTML:

Ver original<input type="text" value="esto está desactivado" disabled><br />
<input type="checkbox" checked><label>Esta caja de chequeo está escogida</label><br />
<textarea cols="20" rows="15" readonly >Esta area de texto solo puede ser leída</textarea>

Ahora con el encabezado que tienes utilizando el dtd de xhtml1-transitional, y en general todo xhtml, estos atributos deben ir igualados a un valor, y este valor debe estar encerrado en comillas dobles, igual que todos los otro atributos de cualquier etiqueta, y por otro lado es recomendable escribir todo en minúscula, así:

Código HTML:

Ver original<input type="text" value="esto está desactivado" disabled="disabled" /><br />
<input type="checkbox" checked="checked" /><label>Esta caja de chequeo está escogida</label><br />
<textarea cols="20" rows="15" readonly="readonly" >Esta area de texto solo puede ser leída</textarea>

Ahora que ya sabes como eran estos atributos, que existen y como deben ser utilizados ahora, también entenderas que los atributos de estos elementos también pueden ser accedidos desde javascript por medio de DOM, así: (pongámole a cada uno un id pequeño)

Código HTML:

Ver original<input type="text" id="txt" value="esto está desactivado" disabled="disabled" /><br />
 
<input type="checkbox" id="cb" disabled="disabled" checked="checked" />
<label id="cblab">Esta caja de chequeo está escogida y deshabilitada</label><br />
 
<textarea id="ta" cols="20" rows="15" readonly="readonly" >
Esta area de texto solo puede ser leída
</textarea>

ya teniendo los elementos con id, y suponiendo que están dentro de sus respectiva etiquetas anidadas o sea html y body, podemos acceder a sus atributos desde llabaeskript (ajajajaja que horror... ), así:

Código Javascript:

Ver originalvar texto = document.getElementById("txt");
var cajaCh = document.getElementById("cb");
var txtA = document.getElementById("ta");
 
texto.disabled = false;
texto.value = "Ahora se puede escribir aquí";
 
cajaCh.disabled = false;
document.getElementById("cblab").innerHTML = "Ahora esta habilitada"
 
ta.readOnly = false;
ta.value = "Ya se puede escribir aquí";

Te dejo un ejemplo funcional de lo que te estoy diciendo:

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("btnCambiar").onclick = cambiar;
            }
            
            function cambiar () {
                var txt = document.getElementById("txt");
                var txtA = document.getElementById("ta");
                var texto = "";
                
                txt.disabled = false;
                txt.value = "desbloqueado";             
                
                ta.rows = 5;
                ta.readOnly = false;
                ta.value = "Ahora tiene menos espacio, pero se puede escribir.  Digita algo";
                /*
                ta.value, también se puede hacer 
                ta.innerHTML, por que textarea necesita etiqueta de cierre, es decir </textarea>
                */
            }
        </script>
    <head>
    
    <body>
        <input id="txt" type="text" value="bloqueado" disabled="disabled" /><br />
        <textarea id="ta" cols="20" rows="15" readonly="readonly" >Esta area de texto solo puede ser leída
        </textarea><br />
        <button id="btnCambiar">cambiar</button>
    </body>
</html>

continua siguiente respuesta....