Javascript event object is not being populated in event handler function

Question

I have the following code:

Html:

<tr>
    <td onclick="ThingClicked()">click me</td>
</tr>

JS:

function ThingClicked(event) {
    var row = event.currentTarget.parent("tr");
    callAnotherDOMManipulatingFunction(row);
}

For some reason, event.currentTarget is undefined. I tried 'this' but that was undefined aswell. What's going on? How do I get the row that this td is contained in?

Answer 1

Try this:

<tr>
  <td onclick="javascript:ThingClicked(this);">click me</td>
</tr>

function ThingClicked(td) {
    callAnotherDOMManipulatingFunction(td.parentNode);
}

Answer 2

Change your code like this:

Html:

<tr>
    <td onclick="ThingClicked(this)">click me</td>
</tr>

JS:

function ThingClicked(element) {
    callAnotherDOMManipulatingFunction(element);
}

Answer 3

Well, since you included a jQuery tag (and included a link to jQuery docs), I'll show you how that way.

EDIT:

jQuery live() docs

jQuery clone() docs

EDIT: Added jQuery's ready() function. You will always place your code inside as shown.

$('document').ready(function() {
    $('td').click(function() {
        var row = $(this).closest('tr');
        callAnotherDOMManipulatingFunction(row);
    });
});

Of course, this will attach a click event to every td tag, but you get the idea.

EDIT:

Further explanation. When using jQuery, you typically will assign events in your javascript, not in HTML. Assigning to 'td' will give the click event to every 'td' tag on the page, so it may be that you will instead give the 'td' a class and use that to attach the event, like:

$('.myFreakingAwesomeClass').click(function() {
    ...
});

You won't often need to reference 'event', but it does come in handy at times.