CODEWITHSUNDEEP
javascript
user1464139
user1464139

Reputation:

How can I catch a click event objects attribute using javascript only?

I have the following coded using jQuery:

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

Our site main page will no longer use jQuery and so I need to do something similar to this using only javascript.

I saw this as a way to get the click event:

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

but how can I get the xx attribute.

Upvotes: 1

Views: 126

Answers (5)

extramaster
extramaster

Reputation: 2653

jQuery has always made developers lazy.. Try this code:

/* 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

Upvotes: 0

mplungjan
mplungjan

Reputation: 178026

Here is the complete version for IE8+ as well

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

Upvotes: 1

asgoth
asgoth

Reputation: 35829

Use an addEventListener or attachEvent (IE).

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

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

More info

Upvotes: 0

VisioN
VisioN

Reputation: 145408

Solution for modern browsers:

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

Upvotes: 1

filype
filype

Reputation: 8380

You can use:

document.getElementsByClassName('status-infos')

Then loop over that array and use.. onclick = function() {}

Use: element.getAttribute() to get the data attribute

Upvotes: 2

Related Questions