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 del ratón

Los eventos relacionados con el ratón (mover o pulsar un botón) son

mouseenter cuando el puntero se mueve sobre un elemento que tiene la función anexada que espera a que suceda el evento
mouseleavecuando el puntero se mueve fuera de un elemento que tiene la función anexada que espera a que suceda el evento
mouseovercuando el puntero se mueve sobre un elemento que tiene la función anexada que espera a que suceda el evento o sobre uno de sus elementos hijos
mouseoutcuando el puntero se mueve fuera de un elemento que tiene la función anexada que espera a que suceda el evento o cuando sale de alguno de sus elementos hijos
mousemovecuando el puntero se mueve en un elemento
mousedowncuando se pulsa un botón (normalmente del ratón) sobre un elemento
mouseupcuando se libera un botón (normalmente del ratón) sobre un elemento
clickcuando se pulsa y libera un botón (normalmente del ratón) sobre un elemento
dblclickcuando se pulsa y libera un botón dos veces (normalmente del ratón) sobre un elemento

Ejemplos

mouseenter y mouseleave

estos eventos ocurrirán cuando el puntero del ratón entra o abandona un elemento. Si un elemento incluye a otros, el evento ocurrirá cada vez que el ratón entre o salga de un elemento hijo

outer

inner
 

from browser import document

def mouseenter(ev):
    document["trace1"].text = f'entering {ev.currentTarget.id}'

def mouseleave(ev):
    document["trace1"].text = f'leaving {ev.currentTarget.id}'

for elt_id in ("yellow1", "blue1"):
    document[elt_id].bind('mouseenter', mouseenter)
    document[elt_id].bind('mouseleave', mouseleave)

mouseover y mouseout

la diferencia con mouseenter y mouseleave es que, una vez que el puntero ha entrado o salido de un elemento, el evento no se propagará a los elementos hijo

outer

inner
 

from browser import document

def mouseover(ev):
    document["trace2"].text = f'entering {ev.currentTarget.id}'

def mouseout(ev):
    document["trace2"].text = f'leaving {ev.currentTarget.id}'

for elt_id in ("yellow2", "blue2"):
    document["yellow2"].bind('mouseover', mouseover)
    document["yellow2"].bind('mouseout', mouseout)

mousemove

mueve el ratón
 

from browser import document

def mousemove(ev):
    document["trace3"].text = f"coordinates : {ev.x}, {ev.y}"

document["green"].bind("mousemove", mousemove)

Atributos de la instancia DOMEvent

Para eventos de ratón, la instancia de DOMEvent posee los siguientes atributos

button indica cual fue el botón pulsado que desencadenó el evento
buttons indica cuales fueron los botones pulsados que han desencadenado el evento.

Cada botón que puede sser pulsado se representa mediante un número (1: botón izquierdo, 2: botón derecho, 4: rueda del ratón). Si se aprieta más de un botón, el valor de los botones se combina para obtener un nuevo número. Por ejemplo, si se pulsa el botón derecho (2) y el botón rueda (4) el valor será igual a 2|4, que es 6
x posición del ratón (en píxeles) en relación a la esquina superior izquierda de la ventana
y posición del ratón (en píxeles) en relación a la esquina superior izquierda de la ventana
clientX la coordenada X del puntero del ratón en las coordenadas locales (DOM content)
clientY la coordenada Y del puntero del ratón en las coordenadas locales (DOM content)
screenX la coordenada X del puntero del ratón en las coordenadas globales (pantalla)
screenY la coordenada Y del puntero del ratón en las coordenadas globales (pantalla)

Si el objetivo del evento es un elemento SVG (el contenedor definido por una etiqueta <SVG>), el evento tiene los siguientes atributos:

svgX, svgY las coordenadas X, Y del puntero del ratón, en relación a la esquina superior izquierda del elemento SVG