Question

The situation:

1. Create button object with document.createElement
2. Directly assign onclick event, e.g: button.onclick = showResult;
3. Modify button innerHtml/append img node (I’ve tried both), to put inside it a magnifying glass png icon.
4. Define showResult function, which receives evt parameter, then try to get the target tagName attribute, but when you click over the icon, it returns ‘IMG’ instead ‘BUTTON’

Here’s the snippet:

td = document.createElement( 'td' );
btn = document.createElement( 'button' );
btn.type = "button";
btn.onclick = showResults;
btn.innerHTML = '<img src="../img/mag.png" />';
td.appendChild( btn );

And the function

function showResults( evt ) {
    console.log( evt.target.src );
}

I fixed this using this conditional:

var btn = evt.target == 'BUTTON' ? evt.target : evt.target.parentNode;

But I really do not like it, is there a workaround or something about this behavior, that you can point my eyes to?.

Answer 1

I hope this can help you

var btn = document.getElementById('btn');
btn.onclick = function(e) {
    clickedButton = e.currentTarget;
    console.log(clickedButton);
}​

Check the example http://jsfiddle.net/Kohver/RD3Zg/