Manejador de eventos con DOM (addEventListener y removeEventListener)

El método addEventListener nos permite incluir un manejador de evento. La sintaxis de addEventListener es la siguiente:

elemento_que_se_escucha.addEventListener('evento', 
                              función_a_lanzar, booleano);

elemento_que_se_escucha – es cualquier elemento presente en un documento al que se quiere asociar el evento.
evento – es el suceso ocurrido sobre el elemento (click, load,…).
función_a_lanzar – es cualquier función definida que queramos que se ejecute cuando ocurra el evento.
booleano – es un valor que define el orden del flujo de eventos. (*NOTA 1)

Si se quiere escuchar un evento sólo una vez y luego elimnaro se debe utilizar el método removeEventListener:

elemento_que_se_escuchaba.removeEventListener('evento', 
                                función_a_anular, booleano);

NOTA 1: Explicación del parámetro booleano del método addEventListener con un ejemplo.
Supongamos que tenemos esto:

< body >
   

      CLICK
   
< /body >

Cuando hacemos clic en el botón no sólo lo estamos haciendo sobre él, sino sobre los elementos que lo contienen en el árbol del DOM, es decir, hemos hecho clic además sobre el elemento body y sobre el elemento div1. Sí sólo hay una función asignada a una escucha para el botón no hay mayor problema, pero si además hay una para el body y otra para el div, ¿cuál es el orden en que se deben lanzar las tres funciones?

Para contestar a esa pregunta existe un modelo de comportamiento, el flujo de eventos (inglés). Según éste, cuando se hace clic sobre un elemento, el evento se propaga en dos fases, una que es la captura —el evento comienza en el nivel superior del documento y recorre los elementos de padres a hijos— y la otra la burbuja —el orden inverso, ascendiendo de hijos a padres—. En un diagrama sería algo así:

Así, el orden por defecto de lanzamiento de las supuestas funciones sería body-div-button.

Una vez visto esto, podemos comprender el tercer parámetro de addEventListener, que lo que hace es permitirnos escoger el orden de propagación:
true: El flujo de eventos es como el representado, y la fase de captura ocurre al lanzarse el evento. El orden de propagación para el ejemplo sería, por tanto, el indicado, body-div-button
false: Permite saltar la fase de captura, y la propagación seguiría sólo la burbuja. Así, el orden sería button-div-body.

NOTA 2: En internet explorer no funciona en las versiones anteriores a la 7 (incluida).

Fuente