javascript - 单击任何元素并在存在时读取特定 HTML-5 自定义属性的监听器？

Question

我想检测何时单击任何元素并检测该元素是否具有特定的 HTML-5 自定义属性(数据测试)。如果它确实具有特定的自定义属性，则从该元素读取 HTML-5 自定义属性。 需要它在 IE8 中工作并且不使用 jQuery。不确定我会怎么做？对于单个页面上的许多元素，自定义属性将具有相同的名称(不是唯一的)。

Answer 1

添加了下面的代码，当您单击一个元素时，它将获取元素的数据属性并打印数据属性(如果存在)。

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

更新

addEventListener 在 IE8 以及 document.getElementsByClassName 和 dataset 中不起作用。您需要为 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

注意:以上代码在 IE8 中有效，但在 IE 9 中无效，因为它进入了 IE9 的 else block ，并且数据集在 IE 中无法识别。希望您现在有了继续前进的想法。