En primer lugar, lo que debes hacer para añadir un evento a un elemento es seleccionarlo. Los últimos estándares de JavaScript ya incluyen los métodos .querySelector(selector)
y .queryselectorAll(selector)
que devuelven respectivamente el primer elemento y todos los elementos que coincidan con el selector. Estos métodos aceptan los mismos selectores que jQuery, así que podrías seguir usando .btnVerProveedores
De esta forma teniendo este código
const boton = document.querySelector('button');
const botones = document.querySelectorAll('button');
console.log('con querySelector', boton);
console.log('con querySelectorAll', botones);
<button>Mi Botón</button>
<button>Mi Segundo Botón</button>
La variable boton
te devolverá sólo el primer botón y la variable botones
te devolverá una colección de nodos con los dos botones.
Lo siguiente que tienes que hacer es añadir un eventListener al elemento que quieras.
Si sólo tienes un elemento es sencillo, con element.addEventListener('evento', callback)
estaría listo. Si lo que tienes es una colección de elementos tendrás que iterar y añadir ese callback a cada uno de los elementos.
De nuevo, te dejo un ejemplo.
const button = document.querySelector('button');
const buttons = document.querySelectorAll('button');
// Si sólo tienes un elemento (variable button)
button.addEventListener('click', function() {
const innerText = this.innerText;
console.log('Un solo elemento', innerText)
});
// Si tienes una colección de elementos (variable buttons)
buttons.forEach(buttonInList => {
buttonInList.addEventListener('click', function() {
const innerText = this.innerText;
console.log('Varios elementos', innerText)
});
}
);
<button>My Button 1</button>
<button>My Button 2</button>
<button>My Button 3</button>
<button>My Button 4</button>
<button>My Button 5</button>
<button>My Button 6</button>
<button>My Button 7</button>
<button>My Button 8</button>
Y para terminar, el acceso a un atributo de un elemento se hace mediante getAttribute(nombreDeAtributo)
.
Como ejemplo puedes usar esta pieza de código:
const button = document.querySelector('button');
button.addEventListener('click', function() {
const myAttributeValue = this.getAttribute('my-attribute');
console.log(myAttributeValue)
})
<button my-attribute="my-value">SOY UN BOTÓN</button>
Habiendo visto todo esto, podemos hacer la aproximación al problema que planteas:
const buttons = document.querySelectorAll('.myClass') // equivalente a $('.myClass')
// equivalente a $(document).on('click', buttons, function() {...});
buttons.forEach(button => {
button.addEventListener('click', function() {
const myAttributeValue = this.getAttribute('my-attribute');
console.log(myAttributeValue)
})
})
<button class="myClass" my-attribute="valor 1">BOTON 1</button>
<button class="myClass" my-attribute="valor 2">BOTON 2</button>
<button class="myClass" my-attribute="valor 3">BOTON 3</button>
<button class="myClass" my-attribute="valor 4">BOTON 4</button>
<button class="myClass" my-attribute="valor 5">BOTON 5</button>
<button class="myClass" my-attribute="valor 6">BOTON 6</button>
<button class="myClass" my-attribute="valor 7">BOTON 7</button>
<button class="myClass" my-attribute="valor 8">BOTON 8</button>
<button class="myClass" my-attribute="valor 9">BOTON 9</button>
<button class="myClass" my-attribute="valor 10">BOTON 10</button>
Con esto deberías poder hacer lo que planteas adaptándolo a tus necesidades.