Qui ne sait pas retrouver un jour avec une liste de liens auxquels il fallait ajouter un évènement pour exécuter tel ou tel script lorsqu’on clique dessus. généralement on se retrouve alors avec une soupe HTML qu’il faudra bien maintenir sur le site et ce n’est pas la meilleur façon de coder en HTML de toute façon. Il existe une méthode simple et facile de réduire le nombre d’évènements et surtout de centraliser leur gestion, c’est la délégation d’Evènement ou en bon anglais l’Event Delegation, késako ? C’est le fait d’utiliser un élément parent commun à un ensemble d’éléments pour monitorer les évènements qui leur sont associés et activer en fonction des conditions l’une ou l’autre fonction. Si vous comprenez pas mon charabia c’est normal, un simple exemple vaut mieux que mille discours 😉 . Partons du code suivant :

<ul id="main_menu">
<li><strong onclick="doThis(this);">lien 1</strong></li>
<li><a href="index.html" onclick="doThat(this); return false" title="j'aime avoir des trucs à dire">lien 2</a></li>
<li><a href="index.html" onclick="doThat(this); return false">lien 3</a></li>
<li><a href="index.html" onclick="doThat(this); return false" title="moi aussi, j'aime avoir des trucs à dire">lien 4</a></li>
<li><a href="index.html" onclick="doThat(this); return false">lien 5</a></li>
<li><a href="index.html" onclick="doThat(this); return false">lien 6</a></li>
</ul>

En utilisant l’Event Delegation tel que me l’a suggéré cette article, nous allons progressivement simplifié notre code et vous ne pourrez plus vous passez de cette technique. Suivez le guide :
1) On retire tous les évènements que l’on ne veut plus voir et on en garde 1 mais pas n’importe où :
<ul id="main_menu" onclick="JustdoIt(event);">
<li><strong>lien 1</strong></li>
<li><a href="index.html" title="j'aime l'event delegation">lien 2</a></li>
<li><a href="index.html">lien 3</a></li>
<li><a href="index.html" title="moi aussi j'aime l'event delegation">lien 4</a></li>
<li><a href="index.html">lien 5</a></li>
<li><a href="index.html">lien 6</a></li>
</ul>

Et là on utilise la magie du javascript et on obtient :
function justDoIt(event) {
    var el = getEventTarget(event);
    if (/^a$/i.test(el.tagName) &amp;&amp; a.title != '') {
        doThat(el);
        return false;
    } else if (/^strong$/i.test(el.tagName)) {
        doThis(el);
        return false;
    }
}

function doThis(el) {
    alert(el.innerHTML);
}

function doThat(el) {
    alert(el.title);
}
Explications :
Tout d’abord, l’élement principal c’est la fonction qui va nous permettre de déterminer sur quel élément on vient de cliquer, c’est ce que je fais avec la fonction suivante :
function getEventTarget(e) {
    var o = e || window.event;
    var el = o.target || o.srcElement;
    if (el.nodeType===3) { //rajouter pour corriger un ancien bug de Safari
        el = el.parentNode;
    }
    return el;
}

Ensuite on regarde si on clique bien sur l’élément qui nous intéresse, c’est-à-dire qui remplit vos conditions. Pour cela j’utilise les expressions régulières et les propriété de l’élément sélectionné pour déterminer si cet élément m’intéresse. En fonction de l’intérêt que j’ai pour l’élément, le script éxécute ou pas notre fonction.
Dernière touche, en utilisant une fonction de gestion des Evènements Javascript on peut même retirer le dernier onclick qui subsite dans la page pour réduire au maximum la présence du javascript dans notre page. On aura donc dans un tag script suivant la liste ou en fin de page l’insertion javascript suivante :
 
<script type="text/javascript">Events.addEvent(document.getElementById('main_menu'),'click',justDoIt);<script>

Soit dit en passant c’est cette technique que j’utilise pour l’affichage de mon sous-menu lorsque l’on clique sur certaines rubriques du menu principal du thème courant de mon blog ;).