How to access the element that activated the event without using jQuery?

Question

I have the code that uses jQuery below that accesses the element that activated the event so I can get a property. How can I do something like this without the library in question?

$(document).ready(function(){
    $('.btn_pag').on("click", function() {
        var value = $(this).attr('value'); // Ao clicar no botao alterar apenas esse valor!
        console.log(value);
        // Restante do código...
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="button small red btn_pag" value="card">Pagar com Cartão</a>
<a href="#" class="button small red btn_pag" value="boleto">Gerar Boleto</a>

Answer 1

Use the mechanism of closures of language

As in "pure" Javascript we need to iterate on the NodeList (returned by methods such as querySelectorAll) to add each Listener event, we can make use of the mechanism of closures to access the button on which we added the Listener within the lexical scope of the callback.

Thus:

const btns = document.querySelectorAll('.btn_pag');

btns.forEach((btn) => {
  btn.addEventListener('click', () => {
    console.log(btn.getAttribute('value'));
  });
});

<a href="#" class="button small red btn_pag" value="card">Pagar com Cartão</a>
<a href="#" class="button small red btn_pag" value="boleto">Gerar Boleto</a>

Note in the above code that even within the callback of Event Listener, we still have access to btn of each iteration of forEach.

Use the closures is, in my opinion, the clearest way to do this, since at all times will refer to the element that registered the event. As we will see below, this is not always the case in the following options.

Use the this

Another option is to use this. Note that in this case, the use of a Function Expression (and not Arrow functions) is mandatory, since the addEventListener is not able to modify the this of a Arrow Function.

const btns = document.querySelectorAll('.btn_pag');

btns.forEach((btn) => {
  btn.addEventListener('click', function() {
    console.log(this.getAttribute('value'));
  });
});

<a href="#" class="button small red btn_pag" value="card">Pagar com Cartão</a>
<a href="#" class="button small red btn_pag" value="boleto">Gerar Boleto</a>

Note that the this will refer to the element that activated the event. Thus, it will not necessarily be the element that registered the event. See documentation to learn more.

Utilise event.target

And finally you can also choose to use the property target, of the event instance passed as a parameter to the callback of Event Listener:

const btns = document.querySelectorAll('.btn_pag');

btns.forEach((btn) => {
  btn.addEventListener('click', (event) => {
    console.log(event.target.getAttribute('value'));
  });
});

<a href="#" class="button small red btn_pag" value="card">Pagar com Cartão</a>
<a href="#" class="button small red btn_pag" value="boleto">Gerar Boleto</a>

Note that, as well as the this, event.target shall refer to the element which activated the event. Thus, event.target will not necessarily be the element that registered the event. To learn more, see documentation.

Pass the this for Handler attribute in HTML

When you use attributes like onclick directly in HTML, you can pass values such as this (or the very event) as argument for the function to be executed:

function handleClick(callerThis) {
  console.log(callerThis.getAttribute('value'));
}

<a href="#" onclick="handleClick(this)" value="card">Pagar com Cartão</a>
<a href="#" onclick="handleClick(this)" value="boleto">Gerar Boleto</a>

Learn more in this other answer.