Vanilla JavaScript Delegate

function delegate( o , f /*, x, y, z, ... */  ){

/*

* o:objet ou null, le contexte dans le code sera exécuté

* f:fonction, la fonction écouteur d'événement

* x:?, optionnel

* y:?, optionnel

* z:?, optionnel

* ...

*/

// On s'assure que le paramètre « f » est bien une fonction.

if(

!f

|| !f.apply

|| Object.prototype.toString.call( f )!=='[object Function]'

){

 return;

}

/*

* On assigne la fonction écouteur d'événement 

* à une variable

*/

var f = f ;

/*

* On assigne le paramètre « o » si ce dernier est un objet.

*/

var o = o && o.hasOwnProperty ? o : null ;

/*

* On initialise un tableau de paramètres.

*/

var p = [];

/*

* On execute une boucle afin d'inscrire tous les paramètres

* dans notre tableau de paramètres. On ne considère pas les

* deux premiers car ils ne doivent pas être passé à la fonction

* écouteur d'événement.

*/

for( 

var i=2;

i<arguments.length;

i++ 

){

/*

* On ajoute les paramètres à partir de l'index 1, la première

* position étant réservée pour l'objet 'Event' généré par 

* le navigateur

*/

p[ i-1 ] = arguments[ i ];

}

/*

* Finalement on retourne une fonction anonyme et ceci est

* l'astuce du mécanisme! C'est cette fonction qui sera le vrai

* écouteur d'événement et qui servira à exécuter la fonction

* définie par l'usager.

* 

* Puisque la fonction anonyme est définie à l'intérieur

* d'une autre fonction, la fonction anonyme aura toujours

* accès aux variables déclarées dans le contexte de l'initialisation.

*/

return function( e ){

/*

* Lors de l'événement, on remplace le premier paramètre de notre

* tableau par l'objet 'Event' passé par le navigateur.

*/

p[ 0 ] = e;

/*

* On applique le contexte d'exécution souhaité à la fonction 

* écouteur d'événement ainsi que les paramètres.

*/

return f.apply( o , p );

};

};

function on_click( event , my_id , my_array ){

var event_obj = event || window.event ;

// (1) event

// (2) event

// (3) event

void console.log( this );

// (1) my_button1

// (2) window

// (3) my_button2

void console.log( my_id );

// (1) undefined

// (2) 'ma_boite_45'

// (3) 'ma_boite_45'

void console.log( my_array );

// (1) undefined

// (2) undefined

// (3) [ 1 , 2 , 3 , 4 , 5 ]

};

(1) void my_button1.addEventListener( 'click' , on_click ); 

(2) void my_button1.addEventListener( 'click' , delegate( null , on_click , 'ma_boite_45' ) ); 

(3) void my_button2.addEventListener( 'click' , delegate( my_button2 , on_click , 'ma_boite_45' , [ 1 , 2 , 3 , 4 , 5 ] ) );