Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `browser`
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

Eventos

Introducción

Supón que tenemos un elemento del tipo botón en una página, como el siguiente :

Si pulsas sobre el mismo no sucederá nada, debido a que no existe ninguna instrucción sobre como reaccionar con un click (i.e., al pulsar el botón). Para ello, la acción para definir esto se realiza mediante la siguiente sintaxis :

def show(ev):
    ...

btn.bind("click", show)

btn es una referencia al elemento. Los argumentos de bind son el tipo de evento que el botón deberá manejar, y la función que es llamada cuando el evento ocurre sobre el elemento. Las siguientes páginas proporcionan muchos ejemplos de eventos tales como for interacción con el ratón, el teclado, drag-and-drop, etc.

La función toma un único argumento, una instancia de la clase DOMEvent definida en el módulo browser. Por ejemplo :

def show(ev):
    print('ok')

btn.bind("click", show)

(recuerda que para ver los resultados del print deberás tener abierta la consola del navegador)

Las instancias de DOMEvent poseen un número de atributos que dependen del tipo de evente. En el caso de un click y, de forma más general para eventos relacionados con el ratón, los atributos incluyen

  • target : el elemento que despachó el evento
  • x, y : posición del ratón en relación a la esquina superior izquierda de la ventana

Por ejemplo, para imprimir el texto del botón y la posición del ratón :

def show(ev):
    print(ev.target.text, ev.x, ev.y)

btn.bind("click", show)

Interfaz

Para la gestión de eventos, los elementos de una página disponen de los siguientes métodos :

elt.bind(evt_name, handler)

la función handler es llamada cuando el evento evt_name ocurre sobre el elemento

elt.unbind(evt_name[, handler])

elimina la asociación de la función handler al evento llamado evt_name. Si se omite handler, elimina todas las asociaciones para el evento

elt.events(evt_name)

devuelve la lista de funciones que maneja el evento llamado evt_name

Usando el decorador browser.bind

Nuevo en la versión 3.6.0

El módulo browser define una función bind que se puede usar como un decorador para un gestor de eventos (event handler). Su sintaxis es como sigue

@bind(target, evt)

Si target es una instancia DOMNode, la función decorada maneja el evento evt para ese elemento.

Si target es un string, se interpretará como un selector CSS ; para todos los elementos en la página que usen este selector el evento evt será gestionado mediante la función decorada.

Ejemplos:

from browser import document, bind

@bind(document[element_id], "mouseover")
def mouseover(ev):
    ...

@bind("div.foo", "enter") # todos los elementos DIV con atributo class="foo"
def enter(ev):
    ...

Objetos DOMEvent

(información de Mozilla Contributors, encontrada en https://developer.mozilla.org/en-US/docs/Web/API/event)

Cualquiera que sea el tipo de evento, las instancias de la clase DOMEvent poseen los siguientes atributos

bubbles
booleano, indica si el evento ascenderá a través del DOM o no

cancelable
booleano, indica si el evento se puede cancelar o no

currentTarget
instancia de DOMNode ; identifica el objetivo del evento, a medida que el evento atraviesa el DOM. Siempre se refiere al elemento al que se ha asociado el manejador del evento en oposición a event.target que identifica el elemento donde ocurre el evento.

defaultPrevented
booleano, indica si event.preventDefault() fue invocado por el evento o no

eventPhase
entero, indica la fase del flujo del evento (event flow) que está siendo evaluada

target
Instancia DOMNode ; el objeto desde el que el evento fue despachado. Es diferente a event.currentTarget cuando el manejador del evento es invocado al ser ascendido (bubbling) o en la captura de la fase del evento

timeStamp
entero, el tiempo (en milisegundos desde el 1 de ennero de 1970 a las 0h) en el que el evento fue creado

type
cadena, contiene el tipo del evento

y los siguientes métodos

preventDefault()
previene de la ejecución de la acción por defecto asociada al evento

Ejemplo

Cuando un checkbox se pulsa, la acción por defecto será mostrar u ocultar una marca dentro del checkbox :

checkbox (comportamiento por defecto)

Para deshabilitar este comportamiento en el checkbox :

from browser import document

def _cancel(ev):
    ev.preventDefault()

document["disabled_cbox"].bind("click",_cancel)

resultado :

checkbox deshabilitado

stopPropagation()
previene la propagación del evento

Ejemplo

En la zona coloreada de más abajo

outer

inner, normal propagation
inner, propagation stopped

los 3 elementos (el frame amarillo exterior y los frames interiores azul y verde) manejan el evento 'click'

from browser import document, alert
from browser.widgets.dialog import InfoDialog

def show(ev):
    InfoDialog("Events", f"click on {ev.currentTarget.id}")

def show_stop(ev):
    InfoDialog("Events", f"clic on %s" %ev.currentTarget.id)
    ev.stopPropagation()

document["yellow"].bind("click", show)
document["blue"].bind("click", show)
document["green"].bind("click", show_stop)

Pulsando en la zona amarilla provoca la llamada a la función show(), la cual muestra el mensaje "click on yellow"

Pulsando en la zona azul provoca el mensaje "click on blue". A posteriori el evento se propaga al padre, el frame amarillo. SDebido a que este frame tambien maneja el evento "click", el navegador llama a la acción asociada, la misma función show(), y muestra el mensaje "click on yellow" (fíjate que el atributo currentTarget se actualiza cuando el evento se propaga).

Pulsando sobre la zona verde provoca que se muestre el mensaje "click on green". Este evento está manejado por la función show_stop(), la cual finaliza en

ev.stopPropagation()

De esta forma el evento no se propaga a un nivel superior y la ejecución termina sin un mensaje de alerta "click on yellow".

Creando y ejecutando un evento

Si deseas disparar un evento en un elemento primero revisa la referencia de Eventos ; por ejemplo, el evento "click" usa la interfaz MouseEvent del DOM, disponible en Brython mediante window.MouseEvent.

MouseEvent es un constructor, por tanto, para crear el objeto evento usa su atributo new :

event = window.MouseEvent.new("click")

y después

element.dispatchEvent(event)

dispara el evento en el elemento especificado.