How to get caller element using Javascript?

Question

I have a table with id "tbl" and it has 2 rows and 3 cols. Each cell(td) has an explicitly defined id. Also, the table has an onclick event that calls a function foo(). The onclick() would be generated whenever any cell is clicked. The table tag is

< table id="tbl" width="80%" height="20%" onclick="javascript: foo()" >

I also tried javascript:foo(this)

I want to find out the id of the table cell that was clicked.

I have tried the following javascript

function foo(e)
{
    var sender = (e && e.target) || (window.event && window.event.srcElement);
    alert("Sender" + sender.id);
}

This works great in Google Chrome and IE, but not in Firefox. In Firefox, sender is undefined. How to get the caller cell in Firefox?

Solution

Firstly, remove javascript: from the onclick attribute. You're confusing this with javascript in the href attribute of a link. In Javascript code, javascript: would create a label named "javascript".

Other than that, foo(event) should work correctly with your final JavaScript code sample. The reason it doesn't work in Firefox but does in Chrome and IE is; they both support the global event object, window.event (which is evaluated when your e.target yields undefined, because this is an element which will not have a target property). Firefox doesn't support the global event object.

Further reading:

• https://developer.mozilla.org/en/DOM:event

Comments

[Andy E]

@drachenstern: I think force-feeding jQuery is going a bit too far. All the popular frameworks handle browser differences. jQuery is my favourite too, but I think "why aren't you using a framework?" is a more unbiased question to ask.

[Saurabh Manchanda]

@drachenstern: Shouldn't I be good with Javascript before trying JQuery ?

[jcolebrand]

@wacky_coder ~ not for something like this, because there's a difference between learning how to encompass all browser quirks and learning how to write code to do things in javascript. I use the framework to handle the quirks and the nitty gritty, and I write the functional parts myself. Same as I do with C#. I don't try and figure how to read the filesystem, I use the .NET framework to do that for me, and I write code to do the functional part. I can extend that analogy to many things, for instance Lists. But you're correct, you should know WHY it works like it does, as your code shows. +1

[jcolebrand]

@wacky_coder ~ I want to point this out, just to be clear: I'm not against roll your own, especially for something simple like this, because I started writing JS long before I learnt jQuery, but I seemed to always get caught up in the tedium of remembering to check everything for each browser. If you don't goto a framework, at least write your own pseudoframework, so you don't have to handle cross-browser differences in every function. That's the biggest benefit to a framework. Yes there's plugins, so those are fun, but those aren't the reason I switched to framework js code...

[Saurabh Manchanda]

@drachenstern : Even I use the .NET framework for most of the work. It handles all the pain I would have been required to take in but sometimes, one has to write code without using the facilities provided by the framework. That's when I have to dive in!