Introduction

Installation

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de import

Interface avec le navigateur

Introduction - API DOM
Créer un document
Accéder aux éléments
Attributs et méthodes

Evénements
Evénements souris
Evénements clavier
Evénements focus
Evénements pour glisser-déposer

Chaine de requête

Objets et librairies Javascript

Modules intégrés propres à Brython

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

Travailler avec Brython

Options de la fonction brython()
Test, débogage et profilage
Deployer une application

Recettes

Salut !
Insérer du contenu dans un élément
Mise en forme HTML (gras, italique...)
Table HTML
Attacher / détacher des événements
Gérer la sélection d'options dans un SELECT
Glisser-déposer
Obtenir le contenu d'un élément
Lire le contenu d'un fichier
Stocker des objets localement
Exemple de onmouseover
 

Evénements

Introduction

Supposons que nous ayons dans la page un élément de type bouton, comme celui-ci :

Si vous cliquez dessus, il ne se passera rien, parce que nous ne lui avons pas dit comment réagir à un clic. Pour cela, il faut définir une fonction qui sera appelée quand on clique, en utilisant la syntaxe :

@btn.bind("click")
def montre(ev):
    ...

btn est une référence à l'élement. L'argument de bind est le type d'événement auquel le bouton doit réagir : les pages suivantes donnent de nombreux exemples d'événement relatifs à la souris, au clavier, au glisser-déposer, etc.

La fonction décorée prend un seul argument, une instance de la classe DOMEvent (définie dans le module browser). Par exemple :

@btn.bind("click")
def montre(ev):
    print('ouah !')

(rappelez-vous que pour voir les résultats de print il faut ouvrir la console du navigateur)

Les instances de DOMEvent possèdent un certain nombre d'attributs qui varient selon le type d'événement. Dans le cas d'un clic, et plus généralement des événements relatifs à la souris, les attributs sont notamment :

  • target : l'élément sur lequel l'événement s'est produit
  • x, y : position de la souris par rapport au bord supérieur gauche de la fenêtre

Par exemple, si on veut afficher le texte affiché sur le bouton, et la position de la souris :

@btn.bind("click")
def montre(ev):
    print(ev.target.text, ev.x, ev.y)

Si le corps de la fonction à déclencher n'est pas présent dans le script (par exemple parce qu'elle est importée), ou si on veut associer le même gestionnaire d'événements pour une liste d'éléments, on peut utiliser une variante de la méthode bind() :

def action(ev):
    ...

for element in elements:
    element.bind("click", action)

Interface

Pour la gestion des événements, les éléments d'une page possèdent les méthodes suivantes :

elt.bind(nom_evt[, gestionnaire])

- si une fonction gestionnaire est spécifiée, cette fonction est appelée quand l'événement nom_evt se produit sur l'élément

- si la fonction n'est pas précisée, retourne un décorateur qui associe la fonction décorée à l'événement nom_evt

elt.unbind(nom_evt[, gest])

défait l'association de la fonction gest à l'événement de nom nom_evt. Si gest n'est pas fourni, défait toutes les associations de l'événement.

elt.events(nom_evt)

renvoie la liste des fonctions qui gèrent l'événement de nom nom_evt

Objets DOMEvent

Quel que soit le type d'événement géré, les instances de la classe DOMEvent possèdent les propriétés suivantes

bubbles
un booléen qui indique si l'élément se propage aux parents de l'élément sur lequel l'événement s'est produit

cancelable
un booléen qui indique si on peut annuler l'événement

currentTarget
l'élément sur lequel on est en train de traiter l'événement (instance de DOMNode)

defaultPrevented
booléen qui indique si on a appelé la méthode preventDefault() sur l'élément

eventPhase
indique quelle phase du flux d'événement est en cours de traitement

target
l'élément sur lequel l'événement s'est produit (instance de DOMNode)

timeStamp
la date/heure à laquelle l'événement s'est produit (en millisecondes depuis le 1/1/1970 à 0h)

type
le type d'événement

et les méthodes suivantes

preventDefault()
empêche l'exécution de l'action par défaut associée à l'événement

Exemple

Quand on clique sur une case à cocher, l'action par défaut est de marquer ou d'effacer un trait à l'intérieur de la case :

case à cocher (comportement par défaut)

Pour désactiver ce comportement sur la case :

from browser import document

def annule(ev):
    ev.preventDefault()

document["disabled_cbox"].bind('click',annule)

résultat :

case à cocher désactivée

stopPropagation()
arrête la propagation de la gestion de l'événement aux éléments parents de celui en cours de traitement

Exemple

Dans la zone colorée ci-dessous

extérieur

intérieur, propagation normale
intérieur, propagation arrêtée

les 3 éléments (le cadre extérieur jaune et les cadres intérieurs bleu et vert) gèrent l'événement clic

from browser import document, alert

def show(ev):
    alert('clic sur %s' %ev.currentTarget.id)

def show_stop(ev):
    alert('clic sur %s' %ev.currentTarget.id)
    ev.stopPropagation()

document["jaune"].bind('click',show)
document["bleu"].bind('click',show)
document["vert"].bind('click',show_stop)

Un clic sur la zone jaune provoque l'appel de la fonction show(), donc l'affichage du message "clic sur jaune"

Un clic sur la zone bleue provoque d'abord l'affichage du message "clic sur bleu". Puis l'événement se propage au parent, la zone jaune : comme cette zone gère aussi l'événement clic, le navigateur appelle la même fonction show() et affiche le message "clic sur jaune" (remarquez que l'attribut currentTarget est modifié quand l'événement se propage)

Quand on clique sur la zone verte, le message "clic sur vert" s'affiche. Cet événement est géré par la fonction show_stop(), qui se termine par

ev.stopPropagation()

L'événement ne se propage donc pas au niveau supérieur et le traitement s'arrête sans afficher "clic sur jaune"

Créer et déclencher un événement

Pour déclencher un événement sur un élément, consulter d'abord la référence des événements ; par exemple, l'événement "click" utilise l'interface DOM MouseEvent, disponible en Brython par window.MouseEvent.

MouseEvent est un constructeur, donc pour créer l'objet événement, on utilise son attribut new :

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

puis

element.dispatchEvent(evenement)

déclenche l'événement event sur l'élément spécifié.