window.addEventListener o addEventListener simplemente, sirven para añadir un 'evento oyente' en este caso a la ventana, este evento oyente puede ser de distintos tipos, hay por ejemplo, eventos de tipo click, eventos de tipo drag, eventos de tipo animation, de tipo keyboard etc, etc.
La función addEventListener puede recibir tres parametros, estos son: eventType, callbackHandler y captureMethod.
Los primeros dos son requeridos, el tercero es opcional y es un parametro booleano, este describe el comportamiento de propagación del evento, puede tener dos comportamientos posibles (bubling y capturing).
Si se omite este tercer parametro, la opción por defecto que toma addEventListener es usar bubling, para entender mejor esto supongamos que tenemos un boton dentro de un div y ambos tienen un evento del mismo tipo asociado:
<div id = "aliasElMachoDiv">
<input type = "button" id = "elBoton">
</div>
<script>
document.getElementById("aliasElMachoDiv").addEventListener("click", manejarElemento);
document.getElementById("elBoton").addEventListener("click", manejarElemento);
function manejarElemento(ev){
console.log("Se pulso el elemento: " + ev.target.id);
}
</script>
Bubling describe un comportamiento de adentro hacia afuera, capturing describe un comportamiento de afuera hacia adentro, quiere decir que usando bubling como en el ejemplo de arriba, pintara en consola 'elBoton', si se estuviera usando capturing pintaria entonces: 'aliasElMachoDiv'.
De todas maneras si ambos elementos (uno dentro del otro) tienen asociados un evento del mismo tipo, ambos ejecutaran las funciones, solo que primero se ejecutara una u otra dependiendo del tipo de propagación del evento (bubling o capturing).
El segundo parametro (callback), te permite usar una función para que ejecutes las acciones que necesites una vez se dispara el evento.
Esta función puede contener cierta 'información del evento', algo así como datos que mete el propio addEventListener que tu puedes recoger luego simplemente poniendole un parametro llamado de cualquier forma a la función:
function(e){
}
en este caso a ese parametro en tu ejemplo le puso 'e'.
para saber que metodos, propiedades y atributos contiene un evento, simplemente podrias hacer algo como imprimir e en consola:
console.log(e);
Te daras cuenta de que hay muchas pero muuuuuuchas propiedades y metodos o funciones que contiene el evento, entre ellas la propiedad target, esta propiedad target depende de si se esta usando bubling o capturing, ya que tambien existe otra propiedad del evento llamada currentTarget.
diferencia entre target y currentTarget:
target: Describe según capturing o bubling el elemento desde el cuál se disparo el evento (te da el elemento html).
currentTarget: Ignora bubling o capturing y se centra en el elemento mas cercano que este a la mano del evento y te devuelve el elemento,
en un evento de tipo click por ejemplo, si hay un div y dentro un
boton, ejecutara bubling o capturing dependiendo de si pulsaste el
boton o el div.
Ahora bien, lo que hace la persona con el código con la función contains es:
Existe dentro del elemento con el id checkbox el elemento que se clickeo? (ya que el evento es de tipo click), si existe quiere decir que se clickeo en cualquier elemento que este dentro del div con id checkbox.
Dentro de lo contrario, se asume que no se clickeo dentro del div con el id checkbox, si no que se clickeo fuera de este, debido a que no hay ningun elemento clickeado que pertenezca a este.