Ça sert à quoi ?
Cet évènement permet d’attacher au niveau du document un ‘handler’ pour gérer des évènements.
En pratique dans les exemples ci dessous on va indiquer à tous les éléments <li> de la page de gérer l’évènement ‘click’; en d’autres termes, la fonction sera appelée à chaque fois qu’un élément <li> sera cliqué.
Chose intéressante, si vous ajoutez de nouveaux éléments <li> au bloc existant, le comportement leur sera également appliqué.
Enfin quelque soit l’endroit où le comportement est défini. Le script va re-scanner toute la page une fois que celle-ci sera complétement chargée.
Comme la doc manque d’exemple à ce sujet je vous ai pondu un petit lot d’exemple
Dans un premier temps nous allons commencer par ajouter une zone de liste, un clique sur un élément de la liste le fait disparaitre, pour éviter de tourner court par manque d’élément, je vous ai aussi inclus un bouton pour en ajouter
Explication
Ligne 02 vous noterez la nouvelle url pour appeler la version la plus à jour de RightJS
Ligne 05 on défini un ensemble d’éléments de la page en l’occurrence les éléments du dom correspondant à #todos-1 li comme devant être réactif à l’évènement click. Lorsque l’événement sera déclenché on appellera la fonction défini inline function() { this.remove(); }, qui détruira l’élément cliqué
Ligne 06 Pour éviter de tomber à cours de ligne, on décide d’ajouter un bouton qui va permettre d’ajouter un élément à l’intérieur du bloc #todos-1 li. Pour ceux à qui $$(« #todos-1 ul »)[0] semble hermétique je vous rappelle que $$() permet d’aller chercher un élément en fonction d’un descripteur CSS mais renvoi un tableau d’élément, $$(« #todos-1 ul »)[0] permet d’en prendre la première valeur ( j’aurais pu aussi écrire $$(« #todos-1 ul »).first() ). Enfin le $$(« #todos-1 ul »)[0].get(« childElementCount »), récupère du DOM le nombre d’élément <li>contenu dans la liste ( en passant la méthode [string].on() est juste un raccourci plus ’sexy’ sur la méthode Event.behave )
...
<script type='text/javascript' src='http://rightjs.org/hotlink/right.js'></script>
<script type="text/javascript">
// with usual functions
var h1 = Event.behave("#todos-1 li", "click", function() { this.remove(); });
"button#add-c".on('click', function(event) {
$$("#todos-1 ul")[0].insert(new Element('li', {html: 'new-li '+$$("#todos-1 ul")[0].get("childElementCount")}));
});
....
<h2> Exemple 1 </h2>
Cliquez pour supprimer...
<div id="todos-1">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<button type="button" id="add-c">Ajouter un element</button>
On peut aussi appeller Event.behave avec des chaines de caractère, ou bien avec une hashlist
Event.behave("#todos-2 li", "click", "addClass", "marked");
// with a hash of handlers
Event.behave("#todos-3 li", {
mouseover: function() { this.addClass('hovered'); },
mouseout: ['removeClass', 'hovered'],
click: 'remove'
});
Si vous devez arrêter certains comportement, il suffit d’ajouter les éléments suivants
// garder une reference sur le couple élément/évènement var handlers = Event.behave(.....); ... // stopper son observation document.stopObserving(handlers);
Pour activer manuellement un élément il suffit de le déclencher au moyen de document.fire, deux paramètres suffiront :
l’évènement attendu,
un objet pseudo event contenant au moins la propriété [target] faisant référence à l’élément visé
Attention toutefois cette fonction est un peu ‘border line’, et peut avoir quelques effets de bord ( la fonction ne génère aucun évènement mais appelle les ‘écouteurs d’évènements’ uns à uns )
// activation de l'événement 'click' sur le premier élément #todos-1 li
document.fire('click',{target:$$("#todos-1 li").first()});
Merci à l’auteur de RightJS, pour les éclaircissements sur certains points
