Utilisation d'addEventListener()

Au sein d’une <div id="output"> se trouve un bouton <button>. À l'aide d'addEventListener(),

faites en sorte que quand ce bouton est cliqué, il affiche Vous m'avez cliqué à la place
de Cliquez-moi.

Solutions
 Avec une fonction anonyme

L'exercice est très simple, mais apporte néanmoins deux choses importantes :
l'utilisation d'addEventListener() et des fonctions anonymes, mais aussi
l'utilisation de this au sein de la fonction pour pointer vers l'élément HTML sur
lequel l'évènement est déclenché :

var output, button;

if (output = document.getElementById("output")) {

if (button = output.getElementsByTagName("button")[0]) {

button.addEventListener("click", function() {

this.innerHTML = "Vous m'avez cliqué";

}, false);

On aurait aussi pu utiliser firstChild.data au lieu d'innerHTML

this.firstChild.data = "Vous m'avez cliqué";

Avec une fonction nommée

Il est évidemment possible d'utiliser une fonction nommée (qui n'est pas
anonyme...), mais dans ce cas on perd le bénéfice de l'utilisation du this
directement dans la fonction. En effet, il faut le passer en paramètre, ce qui
nous oblige quand même à utiliser une fonction anonyme :
var output, button;

function changeText(element) {

element.firstChild.data = "Vous m'avez cliqué";

if (output = document.getElementById("output")) {

if (button = output.getElementsByTagName("button")[0]) {

button.addEventListener("click", function() { changeText(this); },

false);