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

Question

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

Answer 1

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

<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);
   }
  }); 
 }

演示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);
            }


        });

    }
}

更新Fiddle

注意:上面的代码在IE8中工作，但在IE9中不起作用，因为它进入了IE9的else块，而dataset在IE中不被识别。希望你现在就有了继续前进的想法。

Answer 2

像click这样的事件会使DOM泡汤。您可以在document上捕获它们，并从event对象本身获取触发事件的元素：

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

要支持IE8，您可以将其扩展到：

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);
}