Javascript“这个”被事件侦听器覆盖 [英] Javascript "this" overridden by event listener

问题描述

我可能在做错事，但是当尝试将一些面向对象的编程应用于Javascript时，我发现了一些有趣的行为。考虑以下

 函数Bug（element）{
 this.focusedCell = null; 
 element.addEventListener（'click'，this.onClick，true）; 
}; 
 
 Bug.prototype.onClick = function（event）{
 console.log（this is：）; 
 console.log（this）; 
}; 
  

当我从控制台调用该方法时，我看到正确的this实例，但是当我单击文档中的元素，我看到文档元素代替实例。所以...有可能使用事件监听器与实例方法可能不是一个好主意，至少我在做这个方法。

所以问题是：

• 是否可以像这样一个事件监听器，调用一个javascript对象的实例方法，同时保留调用中的实例？




• 有更好的模式吗？

编辑：
除Chrome之外，我还没有尝试过这个。但是我可以想象，行为是一样的。

解决方案

有一个更好的模式，并不需要太多的改变。我将首先显示代码。

  function Bug（element）{
 this.focusedCell = null; 
 // -------------------------------- v ----传递对象，而不是一个函数
 element.addEventListener（'click'，this，true）; 
}; 
 
 //实现EventListener接口
 Bug.prototype.handleEvent = function（event）{
 if（event.type ===click）
 this.onClick（event）; 
} 
 
 Bug.prototype.onClick = function（event）{
 console.log（JSON.stringify（this））; //'{focusedCell：null}'
 console.log（event.currentTarget.nodeName）; //DIV
}; 
  

通过添加 handleEvent 方法， Bug 实现 EventListener 界面。这允许我们将新的 Bug作为第二个参数传递给 addEventListener（）而不是函数。 p>



现在，当点击事件发生时， .handleEvent（）方法将被调用，该方法中 的值将是绑定的 Bug 对象

---

由于这个是对 Bug 实例，它显然不会是对元素的引用。但是没有必要，因为该元素可以通过 event.currentTarget 。

当然，您可以添加元素直接指向构造函数中的 Bug 对象。

演示： em> http://jsfiddle.net/CnZTa/

---

I am probably doing something wrong but I found some interesting behavior when trying to apply some object oriented programming to Javascript. Consider the following

function Bug(element) {
    this.focusedCell = null;
    element.addEventListener('click', this.onClick, true);
};

Bug.prototype.onClick = function(event){
    console.log("this is: ");
    console.log(this);
};

When I call the method from the console, I see the correct instance of "this" but when I click the element in the document I see the document element in lieu of the instance. So... chances are it's probably not a good idea to use event listeners with instance methods, at least the way I'm doing it.

So the question is:

• Is it possible to have an event listener like this that calls an instance method of a javascript object, while preserving the instance in the call?

• Is there a better pattern for doing this?

Edit: I haven't tried this in anything but Chrome. But I would imagine that the behavior is the same.

解决方案

There's a better pattern, and doesn't require much change. I'll show the code first.

function Bug(element) {
    this.focusedCell = null;
    // --------------------------------v----pass the object, not a function
    element.addEventListener('click', this, true);
};

// Implement the `EventListener` interface
Bug.prototype.handleEvent = function(event) {
    if (event.type === "click")
        this.onClick(event);
}

Bug.prototype.onClick = function(event) {
    console.log(JSON.stringify(this));         // '{"focusedCell":null}'
    console.log(event.currentTarget.nodeName); // "DIV"
};

By adding the handleEvent method, we make Bug implement the EventListener interface. This allows us to pass the new Bug object as the second argument to addEventListener() instead of a function.

Now when the "click" event happens, the .handleEvent() method will be invoked, and the value of this in that method will be the Bug object that was bound.

---

Since this is a reference to the Bug instance, it obviously won't be a reference to the element anymore. But it's not necessary, since the element is available via event.currentTarget.

Of course, you could add the element directly to your Bug object in the constructor if desired.

DEMO: http://jsfiddle.net/CnZTa/

---

这篇关于Javascript“这个”被事件侦听器覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！