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

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

我通过原型设计创建了一个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);
    }


HUX布斯
浏览 1052回答 3
3回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript