Ne plus utliser onclick

Une programation propre est une programation structuré. La perfection serais de ne jamais mélangé dans du CSS et du JAVASCRIPT dans de l'(x)HTML.
ex :

html4strict
<div onclick="goback()" style="border:1px solid #000">retour</div>

Cette syntaxe est tous sauf “propre”. Aujourd'hui, on sait remplacé l'attribut “style” par “class” et donc dissocié le CSS de l'(x)HTML.
Mais qu'en ai-t-il pour le javascript ? Il existe bien la technique des attachevents mais ça peut vite devenir ingérable ! en particulier dans des application utilisant XMLHTTPRequest ! Cet article est une traduction de http://bennolan.com/behaviour/

Introduction

AJAX (asynchronous javascript and xml) a fait couler pas mal d'encre. Il est vu comme un moyen pour ajouter des fonctionnalité d'application a une page HTML (drag'n drop, animation fluide et mise a jour dynamique de page)
C'est génial de voir les gens s'approprié cette technologie mais c'est décevant de voir une monté des balises <SCRIPT> et des attributs “onclick” dans les pages web.
Pour exemple, regardez le bout de code de ces deux site connu pour leur utlisation d'AJAX :
BackPack :

html4strict
<span onmouseover="notesBlock.hoverBegin(128699)" 
	onmouseout="notesBlock.hoverEnd(128699, true)">
	<a class="trashcan" href="#" 
		onclick="if (confirm('Are you sure?')) { 
			new Ajax.Updater('notes', 
			'/page/2326/notes/destroy/128699', {

Flickr:

html4strict
<div id="image_16209134_normal">
<script language="Javascript">
photo_hash['16209134'] = new Object();
photo_hash['16209134'].title = '2am on Saturday';
</script>
<h4 id="title_div16209134" 
	style="margin-bottom: 0px; margin-top: 0px;">
	2am on Saturday
</h4>
<script type="text/javascript">initPhotosUserPageTitle_div('16209134');</script>

Apres tous le travail du WASP et des autres pour promouvoir un developpement propre et valide, on peut déplorer de voir ce retour en arriere vers l'époque des balises mal foutu qui encapsule html et javascript.

Le meilleur moyen de faire du javascript est de le faire de façon transparente. PPK et Simon Willison avais recommender cette approche depuis longtemps et c'est définitivement le chemin a suivre. Le seul probleme est que ce n'est pas facile a mettre en oeuvre.

C'est pourquoi “Behaviour” a été creer.

Fonctionnement

“Behaviour” vous donne la possibilité d'utiliser des selecteur CSS pour spécifier un élément et lui ajouter des evenements javascript.
Donc, au lieu d'ecrire :

html4strict
<li>
	<a onclick="this.parentNode.removeChild(this)" href="#">
		Click me to delete me
	</a>
</li>

Vous pouvez écrire :

html4strict
<ul id="example">
	<li>
		<a href="/someurl">Click me to delete me</a>
	</li>
</ul>

Et utilser un selcteur CSS pour obtenir les éléement <a> et leur ajouter des fonctions javascript :

javascript
var myrules = {
	'#example li' : function(el){
		el.onclick = function(){
			this.parentNode.removeChild(this);
 
		}
	}
};
 
Behaviour.register(myrules);

Exemples

D'autres démo

Avec les librairies de script.aculo.us : Voir les autres demos

Telechargement

behaviour.js - version 1.1 - Copyright © Ben Nolan and Simon Willison.
License BSD.

Forum

Sur le groupe GOOGLE

Documentation

Inclure le fichier behaviour.js avec la balise <script> en début de page.
Creer les evenements javascript dans une fichier séparer et les inclure eux aussi avec une autre balise <script>.
Le format des regles de définitions est proche de ceci :

javascript
	var myrules = {
		'b.someclass' : function(element){
			element.onclick = function(){
				alert(this.innerHTML);
			}
		},
		'#someid u' : function(element){
			element.onmouseover = function(){
				this.innerHTML = "BLAH!";
			}
		}
	};
 
	Behaviour.register(myrules);

Les rêgles sont définies dans un tableau associatif de fonctions.
La clef de chaques éléments est le sélecteur, la valeur est la fonction.

Lorsque la page est chargée, la librairie Behaviour sélectionne tous les élements qui corresponde a chaque sélecteur. Elle appelle leur fonction et la branche a l'élément.

Donc, pour ajouter un evenement “onclick” a toutes les balise <li> de la page, vous devez ecrire quelques chose comme ça :

javascript
	var myrules = {
		'li' : function(element){
			element.onclick = function(){
				// Your onclick event goes here - eg;
				// load a page - do an AJAX etc.;
			}
		}
	};
 
	Behaviour.register(myrules);

Si vous modifiez le DOM

Vous pouvez appeller Behaviour.apply() depuis votre script pour réapliquer les regles a des nouveaux éléments.

Auteur original

Ben Nolan : Directeur chez Projectx Technology.
Blog : http://bennolan.com

Remerciements

Texte original

http://bennolan.com/behaviour/


iDo 23/03/2006 11:37