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

问题描述

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

移到这里
<脚本>oClass = new CClass();函数 CClass(){this.m_s = "你好:-/";this.OnEvent = OnEvent;有了这个){var r = document.getElementById(测试");r.addEventListener('mouseover', this.OnEvent);//这不起作用:-/}函数 OnEvent(){警报(这个)；//这将是 HTML div 元素警报(this.m_s)；//将是未定义的 :-()}}

是的，我知道一些使其工作的怪癖，但是当引入这些事件处理程序时，预期的方式是什么???我再次有一种痛苦的感觉，没有人真正生活在 OOP 中 :-(

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

解决方案

事件侦听器回调中的 this 将是触发事件的元素.如果您希望 this 成为您的类的实例，则:

将函数绑定到类实例:

使用Function.prototype.bind，将创建​​一个新函数，它的 this 值将始终是您指定的值(类实例):

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

将函数包裹在匿名函数中:

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

或使用箭头函数(所以不需要 that):

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

注意: 正如下面的评论中提到的，上述两种方法都将不同的函数传递给 addEventListener(带有 bind create一个新函数，同义函数显然是!== this.OnEvent).如果以后要删除事件侦听器，则必须存储对该函数的引用:

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

或:

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

然后您可以删除事件侦听器，例如:

r.removeEventListener('mouseover', 参考);

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>

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 :-(

Here for you to play: https://jsfiddle.net/sepfsvyo/1/

解决方案

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:

Bind the function to the class instance:

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));
//                                          ^^^^^^^^^^^

Wrap the function inside an anonymous function:

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));
//                              ^^^^^^^^^^^^^^^^^^^^^^

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));
//                              ^^^^^^^^^^^^

or:

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);

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