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

Question

我使用 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 属性。

Answer 1

您可以使用：

document.getElementsByClassName('status-infos')

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

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

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

Answer 3

这是 IE8+ 的完整版本

演示

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

Answer 4

使用addEventListeneror attachEvent(IE)。

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

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

更多信息

Answer 5

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

演示| 演示源