使用addEventListener的处理程序中“ this”的值

Question

我已经通过原型创建了一个Javascript对象。我正在尝试动态呈现表。尽管呈现部分很简单并且可以正常工作，但我还需要为动态呈现的表处理某些客户端事件。那也很容易。我遇到问题的地方是处理事件的函数内部的“
this”引用。而不是“ this”引用对象，而是引用引发事件的元素。

参见代码。问题区域在ticketTable.prototype.handleCellClick = function()：

function ticketTable(ticks)
{
    // tickets is an array
    this.tickets = ticks;
}

ticketTable.prototype.render = function(element)
    {
        var tbl = document.createElement("table");
        for ( var i = 0; i < this.tickets.length; i++ )
        {
            // create row and cells
            var row = document.createElement("tr");
            var cell1 = document.createElement("td");
            var cell2 = document.createElement("td");

            // add text to the cells
            cell1.appendChild(document.createTextNode(i));
            cell2.appendChild(document.createTextNode(this.tickets[i]));

            // handle clicks to the first cell.
            // FYI, this only works in FF, need a little more code for IE
            cell1.addEventListener("click", this.handleCellClick, false);

            // add cells to row
            row.appendChild(cell1);
            row.appendChild(cell2);


            // add row to table
            tbl.appendChild(row);            
        }

        // Add table to the page
        element.appendChild(tbl);
    }

    ticketTable.prototype.handleCellClick = function()
    {
        // PROBLEM!!!  in the context of this function, 
        // when used to handle an event, 
        // "this" is the element that triggered the event.

        // this works fine
        alert(this.innerHTML);

        // this does not.  I can't seem to figure out the syntax to access the array in the object.
        alert(this.tickets.length);
    }

Answer 1

您需要将处理程序“绑定”到您的实例。

var _this = this;
function onClickBound(e) {
  _this.handleCellClick.call(cell1, e || window.event);
}
if (cell1.addEventListener) {
  cell1.addEventListener("click", onClickBound, false);
}
else if (cell1.attachEvent) {
  cell1.attachEvent("onclick", onClickBound);
}

请注意，这里的事件处理程序将event对象标准化（作为第一个参数传递）并handleCellClick在适当的上下文中调用（即，引用事件侦听器所附加的元素）。

还要注意，这里的上下文规范化（即this在事件处理程序中设置适当的值）在用作事件处理程序的函数（onClickBound）和元素对象（cell1）之间创建了循环引用。在IE的某些版本（6和7）中，这可能会并且可能会导致内存泄漏。本质上，此泄漏是由于本机和主机对象之间存在循环引用，浏览器无法在页面刷新时释放内存。

为了规避它，您将需要：a）删除this规范化；b）采用替代（且更为复杂）的标准化策略；c）在页面卸载时“清理”现有的事件侦听器，即使用removeEventListener，detachEvent和元素nulling（不幸的是，这将使浏览器的快速历史导航无效）。

您还可以找到一个负责此工作的JS库。它们中的大多数（例如：jQuery，Prototype.js，YUI等）通常按照（c）中所述进行清理。