Los eventos javascript se disparan en cadena. CUnado haces click en un elemento HTML, se dispara su onclick. Luego se dispara el onclick de su padre, luego el onclick del padre de su padre, y así sucesivamente hasta dispara el evento onclick del objeto "document", que es el nodo raiz del árbol DOM de la página, padre ancestro de todos los elementos HTML de una página.
El function (e){ ... } es la función definida por mí que se ejecuta cuando se "captura" un evento con código. El argumento "e" que le paso, es el objeto que representa el evento.
Aquí puedes leer más:
http://librosweb.es/javascript/capitulo_6.html
Hay una técnica que se llama "delegación de eventos", que se aprovecha de esta característica de encadenamiento de disparo de eventos. Recojo por ejemplo los eventos "onclick" sobre el objeto document, así que cuando hagas click en cualquier elemento de la página, se disparará mi código. ¿Cómo sé sobre qué elemento se hizo el click realmente? Pues me lo dice el objeto "event", que yo llamo "e", que contiene un montón de información útil directamente relacionada con el tipo de evento disparado.
Y por último, el e.stopPropagation() evita que la cadena de eventos se siga ejecutando, es decir, evita que se ejecute en mi código el evento "onclick" sobre el padre del elemento html que acabo de capturar.
Teniendo estas ideas claras, el código es muy sencillo de entender.