javascript：如何使用类方法在类中添加事件处理程序作为回调？ [英] javascript: how adding event handler inside a class with a class-method as the callback?

问题描述

如何使用类方法在类中添加事件处理程序作为回调???

How do i add an event handler inside a class with a class-method as the callback ???

<div id="test">move over here</div>
<script>
    oClass = new CClass();
    function CClass()
    {
        this.m_s = "hello :-/";
        this.OnEvent = OnEvent;
        with(this)
        {
            var r = document.getElementById("test");
            r.addEventListener('mouseover', this.OnEvent);  // this does NOT work :-/
        }

        function OnEvent()
        {
            alert(this);    // this will be the HTML div-element
            alert(this.m_s);    // will be undefined :-()
        }
    }
</script>

是的我知道一些让它工作的怪癖，但这些事件处理程序是什么时的预期方式介绍???我再次感到痛苦，没有人真正生活在oop： - （

Yes i know some quirks to make it work but what would be the intended way when these event handlers were introduced ??? I again have the bitter feeling, that no-one truly lives oop :-(

这里有你玩： https://jsfiddle.net/sepfsvyo/1/

推荐答案

事件监听器回调中的 this 将是触发事件的元素。如果你想要这个要成为你班级的实例，那么：

The this inside the event listener callback will be the element that fired the event. If you want the this to be the instance of your class, then either:

将函数绑定到类实例：

使用 Function.prototype.bind ，将创建​​一个新函数，其此值将始终是您指定的值（类实例）：

Using Function.prototype.bind, will create a new function that its this value will always be what you specify it to be (the class instance):

r.addEventListener('mouseover', this.OnEvent.bind(this));
//                                          ^^^^^^^^^^^

将函数包含在一个非常大的函数中：

var that = this;
r.addEventListener('mouseover', function(ev) { that.OnEvent(ev); });
//                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

或使用箭头功能（所以不需要那个）：

or use an arrow function (so no need for that):

r.addEventListener('mouseover', ev => this.OnEvent(ev));
//                              ^^^^^^^^^^^^^^^^^^^^^^

注意：如下面的评论所述，上述两种方法都将不同的函数传递给 addEventListener （一个使用 bind 创建一个新函数，而anounimous函数显然是！== this.OnEvent ）。如果您稍后要删除事件监听器，则必须存储对该函数的引用：

Note: As mentioned in a comment bellow, both of the above methods pass a different function to addEventListener (the one with bind create a new function, and the anounimous function is obviously !== this.OnEvent). If you are going to remove the event listener later, you'll have to store a reference to the function:

var reference;
r.addEventListener('mouseover', reference = this.OnEvent.bind(this));
//                              ^^^^^^^^^^^^

或：

var reference;
var that = this;
r.addEventListener('mouseover', reference = function(ev) { that.OnEvent(ev); });
//                              ^^^^^^^^^^^^

那么你可以删除事件监听器，如：

then you can remove the event listener like:

r.removeEventListener('mouseover', reference);

这篇关于javascript：如何使用类方法在类中添加事件处理程序作为回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！