Oyente de eventos de clic de JavaScript en clase

Actualmente estoy intentando escribir algo de JavaScript para obtener el atributo de la clase en la que se hizo clic. Sé que para hacer esto de la manera correcta, debo 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 indicarme el atributo, pero desafortunadamente esto no funciona. ¿Alguien puede ayudar por favor?

( Nota : puedo hacer esto fácilmente jQuerypero NO me gustaría usarlo )

Oct 29 '13 17:10 30secondstosam

Esto debería funcionar. getElementsByClassNamedevuelve un objeto similar a una matriz (ver más abajo) 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 del bucle por usted, lo cual 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 getElementsByClassNamey, por lo tanto, devuelven archivos undefined.

Detalles sobregetElementsByClassName

getElementsByClassNameno devuelve una matriz, pero HTMLCollectionen la mayoría, o NodeListen algunos navegadores ( Mozilla ref ). Ambos tipos son similares a una matriz (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 una matriz ni se heredan de una matriz (es decir, otros métodos que se pueden realizar en una matriz). no se puede realizar en estos tipos).

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

Oct 29 '2013 10:10 Anudeep Bulla

Con JavaScript moderno se puede hacer así:

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

divs.forEach(el => el.addEventListener('click', event => {
  console.log(event.target.getAttribute("data-el"));
}));

<!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" data-el="1">1</div>
  <div class="b" data-el="no-click-handler">2</div>
  <div class="a" data-el="3">11</div>
</body>
</html>

Expandir fragmento

Obtiene todos los elementos por nombre de clase
Recorre todos los elementos usando forEach
Adjunte un detector de eventos en cada elemento
Se utiliza event.targetpara recuperar más información para un elemento específico.

Feb 18 '2020 18:02 V. Sambor

Puedes usar el siguiente código:

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

Feb 23 '2019 18:02 Rajat kumar