Version

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 :

def montre(ev):
    ...

btn.bind("click", montre)

btn est une référence à l'élement. Les arguments de bind sont le type d'événement auquel le bouton doit réagir, et la fonction à appeler quand cet évenement se produit. Les pages suivantes donnent de nombreux exemples d'événements 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 :

def montre(ev):
    print('ouah !')

btn.bind("click", montre)

(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 :

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

btn.bind("click", montre)

Interface

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

elt.bind(nom_evt, gestionnaire)

Indique que la fonction gestionnaire est appelée quand l'événement nom_evt se produit sur l'élément.

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

Utilisation du décorateur `browser.bind`

Le module browser définit une fonction bind qui peut être utilisée comme décorateur pour un gestionnaire d'événement. Sa syntaxe est

@bind(cible, evt)

Si cible est une instance de DOMNode, la fonction décorée gère l'événement evt sur cet élément.

Si cible est une chaine de caractères, elle est interprétée comme un sélecteur CSS ; pour tous les éléments de la page qui correspondent à ce sélecteur, l'événement evt est géré par la fonction décorée.

Exemples:

from browser import document, bind

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

@bind("div.foo", "enter") # tous les éléments DIV avec l'attribut class="foo"
def enter(ev):
    ...

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 début du temps de vie du document courant)
`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 click(ev):
    ev.preventDefault()

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

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, bind, alert
from browser.widgets.dialog import InfoDialog

def info(element):
    InfoDialog('Event',
               element.id,
               top=element.scrolled_top,
               remove_after=2)

def show(ev):
    info(ev.currentTarget)

def show_stop(ev):
    info(ev.currentTarget)
    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é.

Version

Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

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

Distribution standard

Implémentation de `import`

Packages Brython

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

Evénements

Introduction

Interface

Utilisation du décorateur `browser.bind`

Objets `DOMEvent`

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

Version 3.133.123.113.10

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

Evénements

Introduction

Interface

Utilisation du décorateur browser.bind

Objets DOMEvent

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

Version

Utilisation du décorateur `browser.bind`

Objets `DOMEvent`