使用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);
    }

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

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和元素null荷兰国际集团（不幸的是会使浏览器的快速历史浏览没用）。

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

您可以使用绑定，它可以让你指定要用作值这对于一个给定函数的调用。

   var Something = function(element) {
      this.name = 'Something Good';
      this.onclick1 = function(event) {
        console.log(this.name); // undefined, as this is the element
      };
      this.onclick2 = function(event) {
        console.log(this.name); // 'Something Good', as this is the binded Something object
      };
      element.addEventListener('click', this.onclick1, false);
      element.addEventListener('click', this.onclick2.bind(this), false); // Trick
    }

上面的示例中的问题是您无法使用bind删除侦听器。另一种解决方案是使用一个名为handleEvent的特殊函数来捕获所有事件：

var Something = function(element) {
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is the Something object
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };

  // Note that the listeners in this case are this, not this.handleEvent
  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);

  // You can properly remove the listners
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}

像往常一样 mdn是最好的:)。我只是复制粘贴的部分，而不是回答这个问题。

另外，另一种方法是使用EventListener接口（来自DOM2 ！！不知道为什么没有人提到它，考虑到这是最简洁的方法，并且仅适用于这种情况）。

即，您传递一个实现EventListener接口的对象，而不是传递回调函数。简而言之，它只是意味着您应该在名为“ handleEvent”的对象中具有一个属性，该属性指向事件处理程序函数。这里的主要区别是，在函数内部，this将引用传递给的对象addEventListener。也就是说，this.theTicketTable将是belowCode中的对象实例。要理解我的意思，请仔细查看修改后的代码：

ticketTable.prototype.render = function(element) {
...
var self = this;

/*
 * Notice that Instead of a function, we pass an object. 
 * It has "handleEvent" property/key. You can add other
 * objects inside the object. The whole object will become
 * "this" when the function gets called. 
 */

cell1.addEventListener('click', {
                                 handleEvent:this.handleCellClick,                  
                                 theTicketTable:this
                                 }, false);
...
};

// note the "event" parameter added.
ticketTable.prototype.handleCellClick = function(event)
{ 

    /*
     * "this" does not always refer to the event target element. 
     * It is a bad practice to use 'this' to refer to event targets 
     * inside event handlers. Always use event.target or some property
     * from 'event' object passed as parameter by the DOM engine.
     */
    alert(event.target.innerHTML);

    // "this" now points to the object we passed to addEventListener. So:

    alert(this.theTicketTable.tickets.length);
}

在ES6中，您可以使用箭头功能，因为它将使用词法作用域[0]，从而可以避免使用bind或self = this：

var something = function(element) {
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // 'Something Good'
  };
  element.addEventListener('click', () => this.onclick1());
}

[0] https://medium.freecodecamp.org/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881

此箭头语法对我有用：

document.addEventListener('click', (event) => {
  // do stuff with event
  // do stuff with this 
});

这将是父上下文而不是文档上下文

我知道这是一篇较旧的文章，但是您也可以简单地将上下文分配给变量self，将函数扔到匿名函数中，该匿名函数使用.call(self)上下文并在上下文中传递函数。

ticketTable.prototype.render = function(element) {
...
    var self = this;
    cell1.addEventListener('click', function(evt) { self.handleCellClick.call(self, evt) }, false);
...
};

这比“可接受的答案”更好，因为不需要为整个类或全局变量分配上下文，而是将其整齐地塞在侦听事件的同一方法中。

受kamathln和gagarine回答的影响很大，我想我可以解决这个问题。

我当时想，如果将handeCellClick放入回调列表中，并在事件上使用EventListener接口的对象来触发回调列表方法，则可能会获得更多的自由。

function ticketTable(ticks)
    {
        // tickets is an array
        this.tickets = ticks;
        // the callback array of methods to be run when
        // event is triggered
        this._callbacks = {handleCellClick:[this._handleCellClick]};
        // assigned eventListenerInterface to one of this
        // objects properties
        this.handleCellClick = new eventListenerInterface(this,'handleCellClick');
    } 

//set when eventListenerInterface is instantiated
function eventListenerInterface(parent, callback_type) 
    {
        this.parent = parent;
        this.callback_type = callback_type;
    }

//run when event is triggered
eventListenerInterface.prototype.handleEvent(evt)
    {
        for ( var i = 0; i < this.parent._callbacks[this.callback_type].length; i++ ) {
            //run the callback method here, with this.parent as
            //this and evt as the first argument to the method
            this.parent._callbacks[this.callback_type][i].call(this.parent, evt);
        }
    }

ticketTable.prototype.render = function(element)
    {
       /* your code*/ 
        {
            /* your code*/

            //the way the event is attached looks the same
            cell1.addEventListener("click", this.handleCellClick, false);

            /* your code*/     
        }
        /* your code*/  
    }

//handleCellClick renamed to _handleCellClick
//and added evt attribute
ticketTable.prototype._handleCellClick = function(evt)
    {
        // this shouldn't work
        alert(this.innerHTML);
        // this however might work
        alert(evt.target.innerHTML);

        // this should work
        alert(this.tickets.length);
    }

关于什么

...
    cell1.addEventListener("click", this.handleCellClick.bind(this));
...

ticketTable.prototype.handleCellClick = function(e)
    {
        alert(e.currentTarget.innerHTML);
        alert(this.tickets.length);
    }

e.currentTarget指向绑定到“点击事件”的目标（指向引发事件的元素），而

bind（this）保留thisclick事件函数内部的externalscope值。

如果要单击准确的目标，请改用e.target。