using javascript to add an OnClick event

Question

I am trying to find a way to make classes that cause onclick events. So say for example in a form. I want to give that form field a class. Every time I add a certain class to a field I want it to generate an onclick command to the form field.

The reason I am doing this is I want to add analytic tracking to each form field, but I am using gravity forms so I want to be able to create forms on the fly without editing each one. If I could create a class called .name and have that class add this onClick="mixpanel.track('Name_field');" to the form input, then I could track everytime a user clicks inside the form to fill it out. This way I could track each step of the form and see when users leave.

So list would be

.name  that would add onClick="mixpanel.track('Name_field');"
.email  that would add onClick="mixpanel.track('Email_field');"
.phone  that would add onClick="mixpanel.track('pnone_field');"

I hope that makes sense. Thanks for any help you can give. I am fairly new to javascript so please be easy on me. html and css I am a pro but javascript is my next mountain to climb.

Welcome to SO. Y'know there's companies out there that do this for a living, and are pretty good at it (for good or ill). — Jared Farrish
– Jared Farrish, Commented Dec 29, 2012 at 4:51
ClickTales is who I remember, but there's others, some free (for a while). — Jared Farrish
– Jared Farrish, Commented Dec 29, 2012 at 4:53
If you are open to using jquery you can select all the inputs which has the class attribute and add the click handler: $('#formid input[class]').each(function(){ $(this).click(mixpanel.track($(this).attr('class').val()+'_field'))}) — icramc
– icramc, Commented Dec 29, 2012 at 5:02

user1108579 · Accepted Answer · 2013-08-21 16:18:39Z

1

It would be far more efficient to delegate so you only have one event handler:

var f = function (e) {
  e = e || window.event;
  var t = e.srcElement || e.target, m;
  while (t !== this && (!t.className || !(m = t.className.match(/\b(name|email|phone)\b/)))) {
    t = t.parentNode;
  }
  if (m) {
    switch (m[0]) {
      case "name": mixpanel.track("Name_field"); break;
      case "email": mixpanel.track("Email_field"); break;
      case "phone": mixpanel.track("phone_field"); break;
    }
  }
};
if (document.body.attachEvent) {
  document.body.attachEvent("onclick", f, true);
} else {
  document.body.addEventListener("click", f, true);
}

edited Aug 21, 2013 at 16:18

user1108579

2,0481 gold badge21 silver badges33 bronze badges

answered Dec 29, 2012 at 4:52

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

katspaugh Over a year ago

Do you really think your classname dispatcher running on every click on body is more efficient than individual element listeners?

Niet the Dark Absol Over a year ago

Alone, no. But ultimately the gain depends on how many elements there are, how frequently they are added/removed, and how often the user is likely to click (usually, it's about 1-2 times per page on average!)

Collectives™ on Stack Overflow

using javascript to add an OnClick event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related