Introduction

Installation

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

import implementation

Browser interface

Introduction - DOM API
Creating a document
Accessing elements
Attributes and methods

Events
Mouse events
Keyboard events
Focus events
Drag events

Query string

Using Javascript objects and libraries

Brython-specific built-in modules

browser
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.websocket
browser.webworker

javascript
asyncio
asyncio.fs

Working with Brython

Options of function brython()
Testing and debugging
Deploying an application

Brython for Firefox OS

Introduction
WebApps : design
WebApps : application

Cookbook

Hello world !
Insert content in an element
HTML markup (bold,italic...)
HTML table
Bind and unbind events
Handle options in a SELECT
Drag and drop
Get the content of an element
Read the content of a file
Store objects locally
Example of onmouseover
 

Mouse events

The mouse-related events (movement, pressing a button) are

mouseenter A pointing device is moved onto the element that has the listener attached
mouseleavea pointing device is moved off the element that has the listener attached
mouseovera pointing device is moved onto the element that has the listener attached or onto one of its children
mouseouta pointing device is moved off the element that has the listener attached or off one of its children
mousemovea pointing device is moved over an element
mousedowna pointing device button (usually a mouse) is pressed on an element
mouseupa pointing device button is released over an element
clicka pointing device button has been pressed and released on an element
dblclicka pointing device button is clicked twice on an element

Examples

mouseenter and mouseleave

these events are triggered when the mouse enters or leaves an element. If an element includes other ones, the event is triggered every time the mouse enters or leaves a child element

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 and mouseout

the difference with mouseenter and mouseleave is that once the mouse entered an element, the event is not triggered on its children elements

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

move the mouse
 

from browser import document

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

DOMEvent instance attributes

For mouse events, the instance of DOMEvent has the following attributes

button indicates which button was pressed on the mouse to trigger the event
buttons indicates which buttons were pressed on the mouse to trigger the event.

Each button that can be pressed is represented by a given number (1 : Left button, 2 : Right button, 4 : Wheel button). If more than one button is pressed, the value of the buttons is combined to produce a new number. For example, if the right button (2) and the wheel button (4) are pressed, the value is equal to 2|4, which is 6
x position of the mouse relatively to the left border of the window (in pixels)
y position of the mouse relatively to the upper border of the window (in pixels)
clientX the X coordinate of the mouse pointer in local (DOM content) coordinates
clientY the Y coordinate of the mouse pointer in local (DOM content) coordinates
screenX the X coordinate of the mouse pointer in global (screen) coordinates
screenY the Y coordinate of the mouse pointer in global (screen) coordinates