使用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); }
相关分类