Question

I want to register for events on a button in a web page using javascript addEventListener or something equivalent. But the web page doesn’t appear to have standard form buttons. The html snippet below is the html markup for what appears as a button on the page.

I want to detect mousedown (or mouseclick or equiv). Is there any way I could detect the user clicking on this button?

<a href="javascript:" id="WIN_0_536870914" arid=536870914 artype="Control" ardbn="Dial"    artcolor="null" class="btn btn3d arfid536870914 ardbnDial" style="top:247&#59; left:115&#59; width:46&#59; height:21&#59;z-index:1001&#59;">
<div class="btntextdiv" style="top:0&#59; left:0&#59; width:46&#59; height:21&#59;">
<div class="f1" style="&#59;width:46">Dial</div>
</div>
</a>

Answer 1

The only tricky bit will be getting the elements from the DOM in the first place. If you know the id then it’s trivial to get this specific button:

var elem = document.getElementById('WIN_0_536870914');

elem.addEventListener('click', function () {
  alert('click!');
});

http://jsfiddle.net/ugsYB/

Although you probably want to target all the buttons by their class:

var elems = document.getElementsByClassName('btn');

var i;
for(i = 0; i < elems.length; i++) {
  var elem = elems[i];
  elem.addEventListener('click', function () {
    alert('click!');
  });
}

http://jsfiddle.net/ugsYB/1/ (Note: there are cross browser issues with getElementByClassName)

Of course, jQuery makes this sort of thing trivial:

$('.btn').click(function () { alert('click!'); });

http://jsfiddle.net/ugsYB/2/

But it might be overkill for your needs.