How to listen for click on element and read particular HTML-5 custom attribute?

I want to detect when ANY element is clicked and if that element has a specific HTML-5 custom attribute. If it does have that particular custom attribute then read the HTML-5 custom attribute from that element. ***Need this to work in IE8 and not use jQuery***. Not sure how I would do this? The custom attribute will be the same name for many of the elements on a single page. For example, 2 elements below use "data-analytics-tracking-name"
	<a href="#" id="href-id">test href NOT using - tracking</a><br />
	<a href="#" data-analytics-tracking-name="custom link 1 reported name" id="href-id2-track">test href using - tracking</a><br />
	<a href="#" id="href-id3"><img id="href-id3b" src="http://www.ex-premie.org/gallery/lyrics/Silver-Play-Button_small.jpg"></a><br />
	<a href="#" data-analytics-tracking-name="custom link 2 reported name" id="href-id4-track"><img id="href-id4b-track" src="http://www.ex-premie.org/gallery/lyrics/Silver-Play-Button_small.jpg"></a><br />
	

Open in new window

894359Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hans LangerCommented:
this should work:

- You will need to add the listener "onclick" for those "a" tags, and call a function with its "id"
- "this" value doesnt work on "a" tags.
- you can use:   document.getElementsByTagName('a')  to modify the archor programatically


<a id="href-id2-track" href="#" onclick="getClick('href-id2-track')" data-analytics-tracking-name="custom link 1 reported name">test href using - tracking</a>	

Open in new window



function getClick(id){
var myAttr = document.getElementById(id).attributes['data-analytics-tracking-name']

if(!myAttr==undefined)
   alert(myAttr.value)
};
}

Open in new window

0
894359Author Commented:
HI,
I want this done as a listener and NOT using an onClick event.

Thanks!
0
Hans LangerCommented:
then, as i say, just use:

var a = document.getElementsByTagName('a');
for (var idx= 0; idx < a.length; ++idx){
    var sid = a[idx].id
    document.getElementById(sid ).onclick=function(){getClick(this.id)}
}

Open in new window

0
894359Author Commented:
Hi  Gerente,
What if it isn't an "a" tag and some other type of element? I'm looking for something that listens to any click and then determines if that element has a custom attribute and reads it.

Thanks!
0
Slick812Commented:
greetings Number 894359, , you can use the javascript  document.addEventListener( ) to get response for the event you need, in this case for a click. You can try the code below -
<!DOCTYPE HTML>
<html><head><title>Click event</title>
<style>
body{margin:6px;background:#e3f7ff;}
</style>

<script>/* <![CDATA[ */
function getAtribute(e) {
var artt = e.target.getAttribute("data-analytics-tracking-name");
if (artt) alert("a click with TrackName= "+artt+", ID= "+e.target.id);
}

document.addEventListener("click", getAtribute, false);
/* ]]> */</script>
</head><body><h3 id="hhh" data-analytics-tracking-name="data-trak-top-H3">Document Click Event Listener</h3>
<img data-analytics-tracking-name="data-trak-art-bar" id="img3" src="images3/adebar.gif" alt="art bar">
<div style="color:#fff;background:#543;width:345px;padding:6px;border:2px solid #009;">Enter IP -
<input data-analytics-tracking-name="data-trak-input-ips" type="text" id="ips" value=""><br>
<input type="button" name="but1" value=" set Caller " style="margin-left:14px;">
<br>
</div>
<div style="color:#fff;background:#7bc;width:350px;padding:6px;border:2px solid #c09; margin:3px auto;">
  <a href="#" id="href-id">test href NOT using - tracking</a><br />
  <a href="#" data-analytics-tracking-name="custom link 1 reported name" id="href-id2-track">test href using - tracking</a><br />
  <a href="#" id="href-id3">third link</a><br />
  <a href="#" data-analytics-tracking-name="custom link 2 reported name" id="href-id4-track">last link</a>
</div><br />
</body></html>

Open in new window


Take note, that the  addEventListener( ) method IS NOT going to work the same in all browsers, but the click event is fairly standard, and IE browsers before 9, addEventListener( )  does not work at all.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.