如何仅使用 javascript 捕获单击事件对象属性？答案

【问题标题】：How can I catch a click event objects attribute using javascript only?如何仅使用 javascript 捕获单击事件对象属性？
【发布时间】：2013-01-13 19:17:25
【问题描述】：

我使用 jQuery 编写了以下代码：

$('.status-infos').click( function (e) {
    var xx = $(this).attr('data-xx');
    alert(xx);
    return false;
  });

我们的网站主页将不再使用 jQuery，因此我需要仅使用 javascript 来做类似的事情。

我认为这是获取点击事件的一种方式：

document.getElementById('element').onclick = function(e){
  alert('click');
}

但是我怎样才能得到 xx 属性。

【问题讨论】：

标签： javascript

【解决方案1】：

你可以使用：

document.getElementsByClassName('status-infos')

然后遍历该数组并使用..onclick = function() {}

使用：element.getAttribute()获取数据属性

【讨论】：

谢谢，但是我该如何循环以及如何获取 data-xx 属性？

【解决方案2】：

现代浏览器的解决方案：

var els = document.querySelectorAll(".status-infos");
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener("click", function() {
        var xx = this.getAttribute("data-xx");
        alert(xx);
        return false;
    });
}

【讨论】：

@VisionN - 谢谢。当您说“现代”时。你的意思是多现代？例如，它可以与 IE7 一起使用吗？只是出于兴趣，为什么将变量命名为 els ？
@Anne 不行，IE7 不支持addEventListener，应该换成attachEvent。我们可以为 IE > 8 定义兼容性，而 Chrome 和 Firefox 应该可以正常工作。
@VisionN - 谢谢。有没有办法让 IE7 和现代浏览器都可以使用？
@Anne 使用 jQuery 会更容易:) jQuery 的基本思想是提供跨浏览器 兼容性。顺便说一句，els 简而言之就是elements。

【解决方案3】：

这里也是 IE8+ 的完整版本

DEMO

function getElementsByClassName(className) {
if (document.getElementsByClassName) { 
  return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }

window.onload=function() {
  var statinf = getElementsByClassName("status-infos");
  for (var i=0;i<statinf.length;i++) {
    statinf[i].onclick=function() {
      var xx = this.getAttribute('data-xx');
      alert(xx);
      return false;
    }
  }
}

【讨论】：

所以我不需要像其他答案建议的那样添加或附加事件侦听器？
这是纯粹主义者的方式。我从没干过。如果你真的也想要 ie7 支持，这里有一个链接，但如果你需要，jQuery 是更好的工具 - stackoverflow.com/a/7523439/295783
也许从一开始就使用querySelectorAll 而不是getElementsByClassName 更容易，因为IE8 支持第一个，而IE9 只支持第二个。

【解决方案4】：

jQuery 总是让开发者变得懒惰.. 试试这个代码：

/* http://dustindiaz.com/rock-solid-addevent */
function addEvent(obj, type, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    }

    else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on" + type] = obj["e" + type + fn];
    }
}
var EventCache = function() {
    var listEvents = [];
    return {
        listEvents: listEvents,
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        flush: function() {
            var i, item;
            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };
                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();
/* http://www.dustindiaz.com/getelementsbyclass */
function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}
var statuss=getElementsByClass('status-infos');
for (var i=0;i<statuss.length;i++){
addEvent(statuss[i], 'click', function (e) {
    var xx = this.getAttribute('data-xx');
    alert(xx);
    return false;
  });
}

Demo | Demo Source

【讨论】：

【解决方案5】：

使用addEventListener 或attachEvent (IE)。

var elements = document.getElementByClassName('status-infos');

for(var i=0; i < elements.length; i++) {
   elements[i].addEventListener('click', function(e) {
    ...
    });
}

More info

【讨论】：