在JScript中添加事件处理程序

Question

In the function, editCell() , which is called in response to an onclick event of an HTML table cell, I am trying this:

    var tbl = [valid table ref];
    var row = tbl.insertRow(-1); // insert at end.
    var newCell = row.insertCell(-1);
    newCell.className = "tblItems newItem";
    newCell.innerHTML = "  Click to add a property item...";
    newCell.onclick   = "editCell(this);";

to create a new, 1-cell row at the bottom of the table, where hte new cell is as if it had been created with:

    ...
    <tr>
        <td class="tableItems newItem" onclick="editCell(this);"> 
            &#160;&#160;Click to add a property item...
        </td>
    </tr>
    ...

But the onclick is not being raised (or the function ref doesn't respond when it is).

A co-worker says to use:

    newCell.onclick = function () {
        editIt(this);
    }

but it seems that "...(this)..." will refer to the running context.

What is the right way to add a function the takes an argument, to a newly-created cell reference in JScript?

Must work as far back as IE 8, but only needs to target IE.

Answer 1

newCell.addEventListener('click', editCell, false);

Or in older IE versions:

newCell.attachEvent('onclick', editCell, false);

This explains why using addEventListener is better than onclick .

Answer 2

.setAttribute("onclick","editCell(this);");

Answer 3

this will refer to newCell. However, you are trying to call the wrong function (editIt instead of editCell)

newCell.onclick = function () {
    editCell(this);
}