Escucha de eventos de clic de JavaScript en clase

Actualmente estoy tratando de escribir JavaScript para obtener el atributo de la clase en la que se ha hecho clic. Sé que para hacer esto de la manera correcta, debería usar un detector de eventos. Mi código es el siguiente:

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

classname.addEventListener('click', myFunction(), false);

Esperaba recibir un cuadro de alerta cada vez que hacía clic en una de las clases para decirme el atributo, pero desafortunadamente esto no funciona. ¿Alguien puede ayudar por favor?

( Nota : puedo hacer esto con bastante facilidad jQuerypero NO me gustaría usarlo )

Esto debería funcionar. getElementsByClassNamedevuelve un objeto tipo matriz de matriz (ver edición) de los elementos que coinciden con los criterios.

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

jQuery hace la parte de bucle por usted, que debe hacer en JavaScript simple.

Si tiene soporte para ES6 , puede reemplazar su última línea con:

    Array.from(elements).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });

Nota: los navegadores más antiguos (como IE6, IE7, IE8) no son compatibles, getElementsByClassNamepor lo que regresan undefined.

EDITAR: Corrección

getElementsByClassNameno devuelve una matriz, sino una colección HTMLC en la mayoría, o una NodeList en algunos navegadores ( referencia de Mozilla ). Ambos tipos son Array-Like, (lo que significa que tienen una propiedad de longitud y se puede acceder a los objetos a través de su índice), pero no son estrictamente un Array o se heredan de un Array. (lo que significa que otros métodos que se pueden realizar en una matriz no se pueden realizar en estos tipos)

Gracias al usuario @ Nemo por señalar esto y hacerme profundizar para comprenderlo completamente.

* Esto fue editado para permitir que los niños de la clase objetivo activen los eventos. Vea la parte inferior de la respuesta para más detalles. * *

Una respuesta alternativa para agregar un detector de eventos a una clase donde los elementos se agregan y eliminan con frecuencia. Esto está inspirado en la onfunción de jQuery, donde puede pasar un selector para un elemento secundario que el evento está escuchando.

var base = document.querySelector('#base'); // the container for the variable content
var selector = '.card'; // any css selector for children

base.addEventListener('click', function(event) {
  // find the closest parent of the event target that
  // matches the selector
  var closest = event.target.closest(selector);
  if (closest && base.contains(closest)) {
    // handle class event
  }
});

Violín: https://jsfiddle.net/u6oje7af/94/

Esto escuchará los clics en los baseelementos secundarios del elemento y si el objetivo de un clic tiene un elemento primario que coincida con el selector, se manejará el evento de clase. Puede agregar y eliminar elementos como desee sin tener que agregar más oyentes de clics a los elementos individuales. Esto los atrapará a todos incluso para los elementos agregados después de que se agregó este oyente, al igual que la funcionalidad jQuery (que imagino que es algo similar bajo el capó).

Esto depende de los eventos que se propagan, por lo que si está stopPropagationen el evento en otro lugar, esto puede no funcionar. Además, la closestfunción tiene algunos problemas de compatibilidad con IE aparentemente (¿qué no?).

Esto podría convertirse en una función si necesita realizar este tipo de acción escuchando repetidamente, como

function addChildEventListener(base, eventName, selector, handler) {
  base.addEventListener(eventName, function(event) {
    var closest = event.target.closest(selector);
    if (closest && base.contains(closest)) {
      // passes the event to the handler and sets `this`
      // in the handler as the closest parent matching the
      // selector from the target element of the event
      handler.call(closest, event);
    }
  });
}

=========================================
EDITAR: Esta publicación originalmente utilizó la matchesfunción para Elementos DOM en el destino del evento, pero esto restringió los destinos de los eventos solo a la clase directa. Se ha actualizado para usar la closestfunción en su lugar, permitiendo que los eventos en los hijos de la clase deseada también activen los eventos. El matchescódigo original se puede encontrar en el violín original: https://jsfiddle.net/u6oje7af/23/

Puedes usar el siguiente código:

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'databox') {
        alert(this)
    }
}, false);

Con JavaScript moderno se puede hacer así:

const divs = document.querySelectorAll('.a');

divs.forEach(el => el.addEventListener('click', event => {
  console.log(event.target.classList[1]);
}));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
  <style>
    .a {
      background-color:red;
      height: 33px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      cursor: pointer;
    }
    
    .b {
      background-color:#00AA00;
      height: 50px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="a a-1">1</div>
  <div class="b">2</div>
  <div class="a a-2">11</div>
</body>
</html>

1. Obtiene todos los elementos por nombre de clase
2. Recorre todos los elementos con el uso de forEach
3. Adjunte un detector de eventos en cada elemento
4. Utiliza event.targetpara recuperar más información para un elemento específico