Listener for click on ANY element and read particular HTML-5 custom attribute when present?

Question

I want to detect when ANY element is clicked and detect if that element has a specific HTML-5 custom attribute (data-test). If it does have that particular custom attribute then read the HTML-5 custom attribute from that element. Need this to work in IE8 and NOT use jQuery. Not sure how I would do this? The custom attribute will be the same name (not unique) for many of the elements on a single page.

Answer 1

Added the code below where when you click an element and it will fetch the data attributes of the elements and print the data attributes if it exists.

HTML

<div class="data" data-number="1" data-phone="12314" data-manager="Rex">Click one</div>
<div class="data" data-number="2" data-address="New York">Click two</div>

<div class="data">Click three</div>

<h2>Data attributes will be listed below if it exists</h2>
<div id="result"></div>

JS

 var el = document.getElementsByClassName("data");

  for(var i= 0; i< el.length; i++){
    el[i].addEventListener("click", function (event) {     
      var div = document.createElement('div');
      for (var key in this.dataset) {

        var obj = this.dataset[key];

        var elem = document.getElementById('result');
        var span = document.createElement('span');

        div.appendChild(span);
        div.className = "block";

        span.innerHTML = "data[" + key + "] = " + obj + "&nbsp;&nbsp;&nbsp;";
        elem.appendChild(div);
   }
  }); 
 }

Demo Fiddle

Update

addEventListener will not work in IE8 and also document.getElementsByClassName and dataset. You need to have different logic for IE.

if (window.attachEvent && !window.addEventListener) {
    var el = document.querySelectorAll('.data');

    for (var i = 0; i < el.length; i++) {

        el[i].attachEvent("onclick", function (event) {
            elem = window.event.srcElement.attributes;
            var elem;
            var div = document.createElement('div');

            var element = document.getElementById('result');

            for (var j = 0; j < elem.length; j++) {
                //console.log("node:", elem.item(j).nodeName);
                var str = elem.item(j).nodeName;
                var span = document.createElement('span');

                div.appendChild(span);
                // console.log(str.substring(0, 4));
                if (str.substring(0, 4) == "data") {

                    span.innerHTML = "data[" + elem.item(j).nodeName + "] = " + elem.item(j).value + "&nbsp;&nbsp;&nbsp;";

                } else if (j == (elem.length - 1)) {

                    span.innerHTML = "No data attributes found";
                }

            }
            div.className = "block";
            element.appendChild(div);
        });

    }

} else {
    console.log("in");
    var el = document.getElementsByClassName("data");
    console.log(el);
    for (var i = 0; i < el.length; i++) {
        el[i].addEventListener("click", function (event) {
            var div = document.createElement('div');
            var element = document.getElementById('result');
            console.log(this.dataset);
            if (Object.keys(this.dataset).length != 0) {
                for (var key in this.dataset) {

                    var obj = this.dataset[key];


                    var span = document.createElement('span');

                    div.appendChild(span);
                    div.className = "block";

                    span.innerHTML = "data[" + key + "] = " + obj + "&nbsp;&nbsp;&nbsp;";
                    element.appendChild(div);
                }
            } else {
                var span = document.createElement('span');

                div.appendChild(span);
                div.className = "block";

                span.innerHTML = "No data attributes found.";
                element.appendChild(div);
            }


        });

    }
}

Updated Fiddle

Note: The above code works in IE8 but not in IE 9 as it goes into the else block for IE9 and dataset is not recognized in IE. Hope you get the idea now to go ahead.

Answer 2

Events like click bubble up the DOM. You can catch them all on document and get the element that triggered the event from the event object itself:

document.addEventListener('click', function (event) {
    var customAttrValue = event.target.getAttribute('data-test');
    // ... (do your thing with the value)
});

---

To support IE8, you'd extend this to:

function doSomethingOnClick (event) {
    var customAttrValue = event.target.getAttribute('data-test');
    // ... (do your thing with the value)
}
if (document.addEventListener) {
    document.addEventListener('click', doSomethingOnClick);
} else {
    document.attachEvent('click', doSomethingOnClick);
}