Unidad 3 Javascript

Contenido
3.1 Declaración de variables e instrucciones básicas. ............................................................... 2
Elementos básicos de JavaScript .............................................................................................. 3
Comentarios .............................................................................................................................. 3
Literales ...................................................................................................................................... 3
Caracteres especiales ................................................................................................................. 4
Tipos de datos y variables .......................................................................................................... 5
Variables ........................................................................................................................................ 6
Referencias ................................................................................................................................... 7
Vectores ......................................................................................................................................... 8
Operadores.................................................................................................................................... 9
3.2 Instrucciones de control y repetición.......................................................................................... 11
Bifurcaciones condicionales...................................................................................................... 11
Bucles ........................................................................................................................................... 13
Estructuras de manejo de objetos ........................................................................................... 13
3.3 Funciones y objetos predefinidos ............................................................................................... 15
Objetos ......................................................................................................................................... 16
Definición de objetos en Javascript ......................................................................................... 17
Herencia ....................................................................................................................................... 19
Objetos predefinidos .................................................................................................................. 20
Funciones JavaScript para manejar eventos ................................................................................. 21
3.4 Arreglos ....................................................................................................................................... 32
3.5 Eventos del navegador ................................................................................................................ 34
Sistema de eventos ....................................................................................................................... 39
3.1 Declaración de variables e instrucciones básicas.

JavaScript es un lenguaje de programación interpretado (un lenguaje de tipo script).

A pesar de que existen intérpretes no dependientes de ningún navegador, es un
lenguaje de script que suele encontrarse vinculado a páginas web.
JavaScript y Java son dos lenguajes de programación distintos con filosofías muy
diferentes. El único punto en común es la sintaxis, ya que cuando Netscape diseñó
JavaScript, se inspiró en la sintaxis de Java.

Elementos básicos de JavaScript

Las sentencias de JavaScript terminan en; (igual que en C y Java) y se pueden

agrupar por bloques delimitados por { y }.

Otro punto que conviene tener presente es que los símbolos (nombres de variables,
funciones, etc.) son sensibles a cambios de mayúsculas/minúsculas.

Comentarios

Para introducir comentarios en el programa disponemos de dos opciones:

// Comentario de una sola línea

/*
Comentario que se extiende
varias líneas
*/

Como podemos apreciar, el formato de los comentarios es idéntico al de Java.

Literales

JavaScript sigue el mecanismo de definición de literales de Java y C.

Es decir, disponemos de literales de tipo:

 Enteros 123
 Reales 0.034
 Booleanos true, false
 Cadenas “Cadena de texto”
JavaScript también proporciona soporte para vectores:

estaciones= [“Otoño”,”Invierno”,”Primavera”,”Verano”];.

Caracteres especiales

JavaScript, al igual que Java, utiliza ciertas secuencias de caracteres para

permitirnos introducir caracteres especiales en nuestras constantes de cadena.

Dentro de las cadenas, podemos indicar varios caracteres especiales, con

significados especiales. Éstos son los más usados:
 Caracteres

Carácter Significado

\n
Nueva línea

\t
Tabulador

\’
Comilla simple

\” Comilla doble

\\ Barra invertida

El número ASCII (según la codificación

\xxx
Latin-1)
del carácter en hexadecimal

Tipos de datos y variables

En JavaScript los tipos de datos se asignan dinámicamente a medida que

asignamos valores a las distintas variables y pueden ser:

 Cadenas de caracteres
 Enteros
 Reales
 Booleanos
 Vectores
 Matrices
 Referencias
 Objetos
Variables

En JavaScript los nombres de variables deben empezar por un carácter alfabético

o por el carácter ‘_ ‘ y pueden estar formados por caracteres alfanuméricos y el
carácter ‘_ ‘.

No hace falta declaración explícita de las variables, ya que éstas son globales. Si
deseamos una variable local, debemos declararla usando la palabra reservada var
y hacerlo en el cuerpo de una función.

En una declaración de variable mediante var podemos declarar diversas variables,

separando los nombres de éstas mediante…
Las variables tomarán el tipo de datos a partir del tipo del objeto de datos que les
asignemos.

Referencias

JavaScript elimina del lenguaje los punteros a memoria, pero mantiene el uso de
referencias. Una referencia funciona de forma muy similar a un puntero de memoria,
pero obviando para el programador las tareas relacionadas con gestión de memoria
que provocaban tantos errores en los punteros dentro de otros lenguajes.

En JavaScript se dispone de referencias a objetos y a funciones. Esta capacidad de

tener referencias a funciones nos será muy útil para utilizar funciones que oculten
las diferencias entre navegadores.

function soloExplorer()
{
...
}

function soloMozilla()
{
...
}

function toda()
{
var funcion;
if(navegadorMozilla)
funcion=soloMozilla;
else
funcion=soloExplorer;
funcion();
}
Vectores

Disponemos en JavaScript de un tipo de datos que nos permite manejar colecciones

de datos. Los elementos de estos Array pueden ser distintos.

Como podemos ver en el código siguiente, los Array de Javascript son objetos (de
tipo Array) los cuales pueden tener como índice de acceso un valor no numérico y
de los que no debemos declarar las medidas inicialmente. No disponemos de un
tipo de vector n-dimensional, pudiendo usar para ello vectores de vectores.

//dimensionamos un vector de 20 elementos

vector = new Array(20);
//el vector crece para albergar el 30 elemento
miEstupendoVector[30] = “contenido”;.
//dimensionamos un vector
capitales = new Array();
//podemos usar cadenas como indices
capitales[“Francia”]= “París”;

Operadores
Disponemos en Javascript de los mismos operadores que en Java y C, siendo su
comportamiento el habitual de estos lenguajes:

 Operadores aritméticos: disponemos de los habituales operadores

aritméticos (+, -, *, /, %, etc.), además de los operadores de incremento (++)
y decremento (–).

 Operadores de comparación: disponemos de los siguientes:

 Igualdad ==
 Desigualdad !=
 Igualdad estricta ===
 Desigualdad estricta !==
 Menor que <
  Mayor que >
 Menor o igual que <=
 Mayor o igual que >=

 Operadores lógicos: Javascript proporciona los siguientes operadores

lógicos:

 Negación !
 Y &&
 Ó ||

 Operadores de objeto: además, para la manipulación de objetos

disponemos de:
  Crear un objeto new
 Borrar un objeto delete
 Referencia al objeto actual this

Mateu, C. (2014). Desarrollo de Aplicaciones web. 1st ed. Barcelona: Eureca Media,
SL, pp.93-99.

3.2 Instrucciones de control y repetición

Javascript, como todos los lenguajes de programación, proporciona algunas

estructuras de control.

Bifurcaciones condicionales
Javascript proporciona las dos estructuras de control más conocidas:

if (condicion)
<codigo>
else
<codigo>
switch(valor)
{
case valortest1:
<codigo>
break;
case valortest2:
<codigo>
break;
...
default:
<codigo>
}
Bucles

Dispondremos de tres bucles, el while y do, while y el bucle for.

while(condicion)
<codigo>
do
{
<codigo>
} while(condicion);
for(inicio; condicion; incremento)
<codigo>

Estructuras de manejo de objetos

Disponemos de dos estructuras muy peculiares para manejo de objetos. Por un
lado, tenemos el bucle for..in que permite recorridos por las propiedades de un
objeto (generalmente en vectores):

for (<variable> in <objeto)

<codigo>

Por otro lado tenemos with, que proporcionará una mayor comodidad cuando
tengamos que tratar con múltiples propiedades de un mismo objeto. Podemos
escribir:

with (objeto)
{
propiedad1 = ...
propiedad2 = ...
}
en lugar de:
objeto.propiedad1=...
objeto.propiedad2=...
Mateu, C. (2014). Desarrollo de Aplicaciones web. 1st ed. Barcelona: Eureca
Media, SL, pp.100-101.

3.3 Funciones y objetos predefinidos

Javascript proporciona las construcciones necesarias para definir funciones. La
sintaxis es la siguiente:

function nombre(argumento1, argumento2,..., argumento n)

{
código
}

Los parámetros se pasan por valor.

Objetos

Un objeto en Javascript es una estructura de datos que contiene tanto variables

(propiedades del objeto), como funciones que manipulan el objeto (métodos). El
modelo de programación orientada a objetos de Javascript es mucho más simple
que el de Java o C++. En Javascript no se distingue entre objetos e instancias de
objetos.

El mecanismo para acceder a las propiedades o a los métodos de un objeto es el

siguiente:

objeto.propiedad
valor=objeto.metodo(parametro1, parametro2, ...)

Definición de objetos en Javascript

Para definir un objeto en Javascript debemos, en primer lugar, definir una función
especial, cuya finalidad consiste en construir el objeto.

A dicha función, llamada constructor, debemos asignarle el mismo nombre que al

objeto.

function MiObjeto(atr1, atr2)

{
this.atr1=atr1;
this.atr2=atr2;
}
A partir de este momento podemos crear objetos de tipo MiObjeto.

objeto=new MiObjeto(....)
objeto.atr1=a;.

Para añadir métodos a un objeto, debemos definir primero dichos métodos como
una función normal:

function Metodo1(atr1, atr2)

{
//codigo
// en this tenemos el objeto
}
Para asignar este método a un método del objeto escribiremos:

objeto.metodo1=Metodo1;

A partir de ese momento podemos realizar:

objeto.metodo1(....);

Herencia

La herencia en la programación orientada a objetos nos permite crear objetos

nuevos que dispongan de los métodos y propiedades de unos objetos a los que
llamaremos padre. Gracias a ello, podemos crear objetos derivados y pasar de
implementaciones genéricas a implementaciones cada vez más concretas.

La sintaxis para crear un objeto derivado de otro, por ejemplo, un objeto

ObjetoHijo derivado de un objeto ObjetoPadre, el cual tenía dos argumentos (arg1
y arg2), será:

function ObjetoHijo(arg1, arg2, arg3)

{
this.base=ObjetoPadre;
this.base(arg1,arg2);
}
En ese momento podemos acceder por un objeto de tipo ObjetoHijo tanto a los
métodos y propiedades del objeto hijo como del objeto padre.

Objetos predefinidos

En las implementaciones de Javascript existentes disponemos de un conjunto de

objetos ya predefinidos:

 Array Vectores.
 Date Para almacenar y manipular fechas.
 Math Métodos matemáticos y constantes.
 Number Algunas constantes.
 String Manejo de cadenas.
 RegExp Manejo de expresiones regulares.
  Boolean Valores booleanos.
 Function Funciones.

Mateu, C. (2014). Desarrollo de Aplicaciones web. 1st ed. Barcelona: Eureca

Media, SL, pp. 102-103-105.

Funciones JavaScript para manejar eventos

Como se observó en el ejemplo de la sección anterior, es posible ejecutar código
JavaScript en respuesta a cualquier evento que ocurre en un documento HTML.
Esto se llevó a cabo escribiendo directamente el código JavaScript como valor del
atributo correspondiente al evento, dentro del elemento en el cual se deseaba
manejar el evento, de la siguiente manera: onclick = "this.innerHTML += ‘Texto
cambiado!‘". Si bien es posible hacer esto para un código de una línea, o unas
cuantas, sería poco legible si se hiciera para segmentos de código JavaScript más
extensos. Para estos casos es preferible colocar ese segmento de código en una
función JavaScript, la cual puede ser invocada para manejar cualquier evento;
además, de esta manera se promueve la reutilización de código, ya que la misma
función puede ser invocada por varios eventos si así se desea.
 Las funciones JavaScript deben colocarse entre la etiqueta inicial <script> y la
etiqueta final </script>, las cuales a su vez deben ir en la cabecera del documento
HTML, entre la etiqueta inicial <head> y la etiqueta final</head>.

Ejemplo: Llamando a una función en respuesta a un click

En este ejemplo se realizará un documento HTML para mostrar cómo ejecutar una
función JavaScript en respuesta a un click sobre un elemento HTML. La diferencia
de este ejemplo, respecto al anterior, es que se invocará una función JavaScript que
ejecutará el código, mientras que en el ejemplo anterior el código no estaba en una
función, sino directamente como valor del atributo onclick del elemento HTML.

A partir del contenido que se muestra en el listado 3.2, se creará un documento

HTML con el nombre eventoClickCambiaTextoFuncion.html; después, se abrirá en
un navegador web.

Listado 3.2. Archivo eventoClickCambiaTextoFuncion.html

<html>
<head>
<title>Llamando Funci&oacute;n en Respuesta a Click</title>
<script type="text/javascript">
function cambiaTexto(obj){
obj.innerHTML += "Función JavaScript ejecutada!";
}
</script>
</head>
<body>
<h1>Da click en el texto de abajo para cambiarlo</h1>
<h2 onclick="cambiaTexto(this);">
Texto original.</h2>
</body>
</html>
El listado 3.2 crea un documento HTML con dos encabezados y un segmento de
código JavaScript con una función. En la línea 11 del listado se encuentra un
encabezado <h1> que da instrucciones para dar click sobre el texto que se
encuentra en el siguiente encabezado <h2> con el fin de cambiar su contenido. En
las líneas 12 y 13 se encuentra el encabezado <h2> con el atributo
onclick="cambiaTexto(this);", el cual indica que la

función JavaScript que se encuentra como valor del atributo onclick será ejecutada
cuando el usuario dé click sobre el texto del encabezado, esto es cuando ocurra el
evento onclick sobre el elemento HTML. La función JavaScript cambiaTexto(obj)
que es invocada cuando ocurre el evento onclick está definida en el segmento de
código JavaScript, en las líneas 4 a 8, el cual está delimitado por la etiqueta inicial
<script> y la etiqueta final </script>. La función cambiaTexto(obj) recibe un
parámetro que representa el elemento HTML sobre el cual se modificará el texto y
ejecuta, en su línea 6, una concatenación del texto Función JavaScript ejecutada!
con el texto que se encuentra actualmente en el elemento, que es pasado como
parámetro y determinado por obj.innerHTML, donde la palabra obj se refiere al
elemento pasado como parámetro y el atributo innerHTML tiene el contenido de
dicho elemento HTML.

La figura 3.7 muestra la página web eventoClickCambiaTextoFuncion.html de

este ejemplo visualizada en un navegador web, sin haber dado click sobre el texto
del encabezado <h2>.

La figura 3.8 muestra la página web eventoClickCambiaTextoFuncion.html

después de que el usuario ha dado click una vez sobre el texto del encabezado
<h2>.

La figura 3.9 muestra la página web eventoClickCambiaTextoFuncion.html

después de que el usuario ha dado click varias veces sobre el texto del encabezado
<h2>. Se observa que cada vez que el usuario da click sobre el texto del
encabezado, se ejecuta la función JavaScript asociada con el evento onclick del
encabezado <h2>.

Figura 3.7. Manejo del evento onclick sobre un encabezado

Figura 3.8. Página web después de haber dado click una vez sobre el encabezado
Figura 3.9. Página web después de haber dado click varias veces sobre el
encabezado

Eventosonmouseover y onmouseout
Los eventos onmouseover y onmouseout también pueden ser manejados a través
de la ejecución de funciones JavaScript. El evento onmouseover se dispara cuando
el mouse se mueve sobre un elemento HTML, mientras que el evento onmouseout
se dispara cuando el mouse se mueve fuera del elemento HTML.

Para estos dos eventos también es necesario añadirlos como atributos del
elemento HTML sobre el cual se desea manejarlos, como se ha hecho en las sec-
ciones anteriores. El valor del atributo debe contener la invocación a la función
JavaScript que será ejecutada cuando el evento ocurra. Los atributos asociados a
estos eventos son precisamente los atributos onmouseover y onmouseout.

Ejemplo: Cambiando texto en respuesta a onmouseover y onmouseout

En este ejemplo se realizará un documento HTML para mostrar cómo ejecutar

funciones JavaScript en respuesta a los eventos onmouseover y onmouseout sobre
un elemento HTML.

A partir del contenido que se muestra en el listado 3.3, se creará un documento

HTML con el nombre eventoOnMouseOverCambiaTexto.html; después, se abrirá
en un navegador web.

Listado 3.3. Archivo eventoOnMouseOverCambiaTexto.html

<html>
<head>
<title>Eventos OnMouseOver y OnMouseOut</title>
<script type="text/javascript">
function mouseSobre(obj){
obj.innerHTML = ‘Mouse SOBRE el elemento!‘;
}
function mouseFuera(obj){
obj.innerHTML = ‘Mouse FUERA del elemento!‘;
}
</script>
</head>
<body>
<h1 onmouseover="mouseSobre(this);"
onmouseout="mouseFuera(this);">
Mouse FUERA del elemento!</h1>
</body>
</html>
Resumen de eventos
En la tabla 3.1 se presenta un resumen de los eventos revisados en este capítulo.
También se incorporan otros eventos importantes que pueden ser utilizados de
manera similar.

Tabla 3.1 Eventos y sus descripciones

Evento Descripción
onclick Se dispara cuando el usuario da
click sobre un elemento
ondblclick Se dispara cuando el usuario da
doble click sobre un elemento
onmousedown Se dispara cuando el usuario
presiona el botón del mouse
sobre un elemento
onmouseup Se dispara cuando el usuario
libera (deja de presionar) el
botón del mouse sobre un
elemento
onmouseover Se dispara cuando el usuario
mueve el mouse sobre un
elemento
onmouseout Se dispara cuando el usuario
mueve el mouse fuera de un ele-
mento
onkeydown Se dispara cuando el usuario
está presionando una tecla
onkeypress Se dispara cuando el usuario
presiona una tecla
onkeyup Se dispara cuando el usuario
libera (deja de presionar) una
tecla
onload Se dispara cuando un objeto se
ha cargado
onpageshow Se dispara cuando el usuario
navega hacia una página web
onpagehide Se dispara cuando el usuario
deja una página web
onblur Se dispara cuando un elemento
pierde el foco
onchange Se dispara cuando el contenido
de un elemento de captura, la
selección o el estado han
cambiado. Esto aplica para los
elementos <input>, <select> y
<textarea>
onfocus Se dispara cuando un elemento
obtiene el foco
oninput Se dispara cuando un elemento
recibe entrada del usuario
onreset Se dispara cuando un formulario
es limpiado
onselect Se dispara después de que el
usuario ha seleccionado un seg-
mento de texto. Esto aplica para
los elementos <input> y
<textarea>
onsubmit Se dispara cuando se envía un
formulario
ondrag Se dispara cuando un elemento
está siendo arrastrado
ondragend Se dispara cuando el usuario ha
terminado de arrastrar un ele-
mento
ondragenter Se dispara cuando el elemento
arrastrado ingresa a la zona
donde se soltará
ondragleave Se dispara cuando el elemento
arrastrado sale de la zona
donde se soltará
ondragover Se dispara cuando el elemento
arrastrado está sobre la zona
donde se soltará
ondragstart Se dispara cuando el usuario
comienza a arrastrar un
elemento
ondrop Se dispara cuando el elemento
arrastrado es soltado en la zona
donde se soltará
Jaimez González, C. (2015). Programación de Web Dinámico. 1st ed. México D.F:
Juan Carlos Rosas Ramírez, pp.37-48.

3.4 Arreglos
Una matriz es una colección de valores de datos, al igual que un objeto, mientras
que cada valor de datos contenido en un objeto tiene un nombre, cada valor de
datos en una matriz tiene un número o índice. En JavaScript, recupera un valor de
una matriz encerrando un índice entre corchetes después del nombre de la matriz.
Por ejemplo, si una matriz se llama a y i es un número entero no negativo, a [i] es
un elemento de la matriz. Los índices de matriz comienzan con cero; así, un [2] se
refiere al tercer elemento de la matriz a.

Colección de variables
Pueden ser todas del mismo tipo o cada una de un tipo diferente
var nombre_array = [valor1, valor2, ..., valorN];
var sin_inicializar = new Array(5);
Se accede a los elementos con nombre_array[índice]
o índice es un valor entre 0 y N-1
Propiedades y métodos
 length: número de elementos de un array
 concat(): concatenar los elementos de varios arrays
o a1 = [1, 2, 3];
o a2 = a1.concat(4, 5, 6); // a2 = [1, 2, 3, 4, 5, 6]
o a3 = a1.concat([4, 5, 6]); // a3 = [1, 2, 3, 4, 5, 6]
  pop(): elimina y devuelve el último elemento del array
 push(elemento): añade un elemento al final del array
 shift(): elimina y devuelve el primer elemento del array
 unshift(elemento): añade un elemento al principio del array
 reverse (): coloca los elementos del array en el orden inverso a su posición
original a1. reverse(); // a1 = [3, 2, 1]

Pavón Mestras, J. (2019). JavaScript. 1st ed. [ebook] Madrid, p.63. Available at:
http://www.wiener.edu.pe/manuales/4to-ciclo/programacion-web-2/curso-practico-
de-javascript.pdf [Accessed 24 Mar. 2019].

3.5 Eventos del navegador

Uno de los puntos más importantes de Javascript es su interacción con el
navegador. Para ello incorpora una serie de eventos que se disparan en el momento
en que el usuario realiza alguna acción en la página web.

Eventos
Evento Descripción
Termina de cargarse una página.
onLoad
Disponible en:
<BODY>

Salir de una página. Disponible en:

onUnLoad
<BODY>
Pasar el ratón por encima. Disponible
onMouseOver en: <A>,
<AREA>
 Que el ratón deje de estar encima de
onMouseOut un elemento

Enviar un formulario. Disponible en:

onSubmit
<FORM>
Pulsar un elemento. Disponible en:
onClick
<INPUT>
Perder el cursor. Disponible en:
onBlur <INPUT>,
<TEXTAREA>
Cambiar de contenido. Disponible en:
onChange <INPUT>,
<TEXTAREA>
Conseguir el cursor. Disponible en:
onFocus <INPUT>,
<TEXTAREA>
Seleccionar texto. Disponible en:
onSelect <INPUT
TYPE=“text”>, <TEXTAREA>
Disponemos de dos mecanismos para indicar qué función manejará un evento:
Mateu, C. (2014). Desarrollo de Aplicaciones web. 1st ed. Barcelona: Eureca Media,
SL, pp. 104.
Sistema de eventos

Tan importante como poder manipular fácilmente el DOM desde nuestros

programas, el otro gran pilar de las bibliotecas de Javascript es la gestión de los
eventos (events). Sabido es para todos los que se han querido enfrentar a esta tarea
sin utilizar ningún framework que la cosa no es trivial, puesto que cada navegador
nos ofrece un sistema de eventos diferente.

Generalmente, un evento, en jQuery, se escucha mediante el pedido .bind.

Así, para poder capturar los clics en todos los enlaces, podemos escribir:

$('a').bind('click', function() {
contador += 1
})
Siempre sigue el mismo patrón: seleccionamos el nodo al que queremos asignar el
evento, y con la orden bind, le podemos asignar el evento que deseemos.
Por ejemplo, para asignar un evento change a un campo desplegable (select),
escribiremos:

$('#idselect').bind('change', manipulador}

Donde manipulador puede ser, como en el caso anterior, una función anónima o
puede ser el nombre de una función (la variable que contiene el objeto función).

Cabe decir que a partir de la versión de jQuery 1.4, a la función bind le podemos
asignar un objeto que contenga una lista de eventos mapeados, como por ejemplo:

$('a').bind({
'mousenter': function(evt) {
$(this).css('color', 'black')
},
'click': function(evt) {
$(this).toggle();
}
});

Es importante destacar que en la función manipuladora del event, la variable this

apunta al nodo del DOM que la desencadena, y que por lo tanto la orden $(this)
selecciona el propio nodo.
Asimismo, la función recibe un parámetro que contiene un objeto de tipo event. Este
parámetro a menudo es omitido, pero con él podemos acceder a información
adicional en el momento de generación del evento y durante su propagación. Con
jquery el sistema de eventos sigue una regla de propagación en burbuja (bubbling),
que cuando un evento es generado en un nodo se propaga hacia sus padres.
Imaginemos el siguiente ejemplo:

$(document).ready(function(){
$('tr').click(function(){
alert('clic a tr');})
.height(30)
.css( 'background-color', '#eaeaea');
$('a').click(function(e){
alert('clic a a');
e.stopPropagation()
});
});
 </script>
</head>
<body>
<table style="border:1px solid black;">
<tr>
<td><a>Hola</a></td>
</tr>
</table>
Si hiciéramos clic en el enlace a, lo capturaríamos desde la función del evento, pero
como el evento seguiría su proceso de propagación, también ejecutaría el
manipulador asignado al nodo padre tr, y nos generaría un doble alert(), el del
elemento a y el del elemento tr. Es decir, se ejecutarían ambos eventos. Para
impedir esto y romper la cadena de propagación, utilizaremos el objeto evento que
recibe el manipulador y llamaremos al método .stopPropagation() tal y como
hemos hecho en el ejemplo.

En el objeto evento también podemos encontrar otros datos, como las propiedades
pageX y pageY, que son las coordenadas de ratón en las que se ha desencadenado
el event. También, dentro de este objeto encontramos propiedades como target,
que es el objeto que genera el evento, o currentTarget, que es el objeto desde el
que se ha iniciado la propagación.

Del mismo modo que asignamos un evento con el método bind, lo podemos
desasignar con el método .unbind. Así:

$('tr').unbind('click');
Los eventos pueden ser ejecutados de manera manual usando el comando.
trigger('nombrevento'); así, si hacemos:

$('tr').trigger('click');
Se ejecutará el handler asignado al tal evento (siempre y cuando lo hayamos
asignado a priori). Del mismo modo, podemos generar nuestros propios eventos.

Imaginemos que tenemos un reloj y queremos que nos notifique el tiempo cada
segundo. Podemos, desde la función que controla el tiempo que pasa, generar un
evento de tipo 'segundo' (el nombre es a voluntad nuestra), como hemos realizado
en el ejemplo siguiente:

var segundos = 0
setInterval(function(){
$('#p1').text( ++segundos )
.trigger('segundo', [segundos])
}, 1000)
$('#p1').bind('segundo', function(evento, fecha){
if(fecha==10) segundos = 0
})
Utilizamos el elemento #p1 para que nos genere un evento de segundo, después lo
capturamos y hacemos que la variable que cuenta los segundos que pasan se
inicialice cuando llega a 10. Para que esto funcione, necesitamos tener un nodo con
id #p1 en nuestro html.
Tabla de eventos

blur Cuando en un campo de formulario perdemos

el foco del teclado.
Cuando un elemento de un formulario recibe
focus
un clic del ratón.
Un elemento externo acaba el proceso de carga,
load
como por ejemplo una imagen.
La ventana cambia de tamaño, pertenece al
resize
window
click Hacemos clic sobre un nodo.
Hacemos scroll en la ventana o en un elemento
scroll
div.
Hacemos doble clic sobre un nodo.
dblclick
mouseover
Pasamos el ratón por encima del elemento.

mouseout El ratón sale del elemento.

change El valor de un campo de formulario cambia.

submit
Un formulario es enviado hacia el servidor.
Pulsamos una tecla del teclado. La tecla que
se ha pulsado la podemos encontrar en la propiedad
keydown,keyup
wich del objeto evento pasado al manipulador.

error Se desencadena, por ejemplo, cuando desde

el servidor una imagen no se carga.

Existen accesos directos en la mayoría de las propiedades que podemos utilizar con
un bind, con su nombre de función directamente. Así, podemos llamar los métodos
de un selector.click,.change,.error, etc.
Collell Puig, J. (n.d.). CSS3 y Javascript avanzado. 1st ed. Catalunya: Universitat
Oberta de Catalunya, pp.37-39.