我已经通过原型创建了一个Javascript对象。我正在尝试动态呈现表。尽管呈现部分很简单并且可以正常工作,但我还需要为动态呈现的表处理某些客户端事件。那也很容易。我遇到问题的地方是处理事件的函数内部的“ this”引用。而不是“ this”引用对象,而是引用引发事件的元素。
参见代码。问题区域在ticketTable.prototype.handleCellClick = function():
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); }
您需要将处理程序“绑定”到您的实例。
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在适当的上下文中调用(即,引用事件侦听器所附加的元素)。
event
handleCellClick
还要注意,这里的上下文规范化(即this在事件处理程序中设置适当的值)在用作事件处理程序的函数(onClickBound)和元素对象(cell1)之间创建了循环引用。在IE的某些版本(6和7)中,这可能会并且可能会导致内存泄漏。本质上,此泄漏是由于本机和主机对象之间存在循环引用,浏览器无法在页面刷新时释放内存。
this
onClickBound
cell1
为了规避它,您将需要:a)删除this规范化;b)采用替代(且更为复杂)的标准化策略;c)在页面卸载时“清理”现有的事件侦听器,即使用removeEventListener,detachEvent和元素nulling(不幸的是,这将使浏览器的快速历史导航无效)。
removeEventListener
detachEvent
null
您还可以找到一个负责此工作的JS库。它们中的大多数(例如:jQuery,Prototype.js,YUI等)通常按照(c)中所述进行清理。