Click wrapper

Way handling click events with only one listener.

by Manuel Souto Pico

HTML

<!-- Parent div to have the actual listener. Whenever an anchor is clicked, the event will bubble up to the #wrap div -->
<div id="wrap">
    <!--Each div has a data-freq attribute to pass it's frequency--> 
    <a id="a1" href="#" data-freq="1">Anchor 1</a>
    <br> 
    <a id="a2" href="#" data-freq="10">Anchor 2</a>
    <br> 
    <a id="a3" href="#" data-freq="100">Anchor 3</a>
    <br>
</div>
<!--Print out the frequency-->
<div>Frequency:</div>
<div id="freq">0</div>

JavaScript

// Get the important elements
var wrap = document.getElementById("wrap"),
    freqDiv = document.getElementById("freq");

// Function to let us change frequency
function changeFrequency(amount) {
    freqDiv.innerHTML = amount;
}

// Add only one event listener and let clicks bubble up
wrap.addEventListener("click", function (e) {
    // Change the frequency by the data-freq value
    changeFrequency(e.target.dataset["freq"]);
    // Don't change pages
    e.preventDefault();
});