如何将单击事件绑定到类中的处理程序？

Question

当我尝试将类方法绑定到事件时，我收到错误消息“无法读取未定义的属性‘绑定’。”这告诉我，我绑定的对象是未定义的，但它确实存在并且可以调用。考虑以下代码：

someClass = ({

    event: function(workObject, event, action) {
        workObject.addEventListener(event, window[action].bind(null, arguments[3]));
    },

    methodEventHandler: function(param) {
        // Do Something
    },
});


function someEventHandler(param) {
    // Do Something
}

现在当我尝试像这样绑定事件监听器时：

someClass.event(workObject, "click", "someEventHandler", someParameter);

它有效。但是，当我尝试以这种方式绑定它时：

someClass.event(workObject, "click", "someClass.methodEventHandler", someParameter);

它因上述错误而失败。我的问题是为什么？我认为它与范围有关，因为常规函数在全局上下文中并且有效，但不在全局范围内的方法失败。我使用包装函数解决了这个问题，但我真的很想知道它为什么会表现出这种行为。我这样做是为了可以使用函数名作为字符串绑定事件处理程序。使动态生成网页时更容易处理。我唯一能想到的是事件处理程序的名称需要采用某种格式，但我不确定它是什么样的。有什么见解吗？

我对此进行了一些研究，并发现了很多关于如何使用各种框架（如 jQuery、AngularJS 和 Node.js）将处理程序绑定到事件等的问题和答案。其中一些在这里：

How to access the correct `this` inside a callback?

Bind click event to open a link in new tab

Bind a click event to a method inside a class

Answer 1

someEventHandler 是一个全局函数，因此它可以称为window["someEventHandler"]，因为someEventHandler 成为window 的属性。

但someClass.methodEventHandler 不是全局的，因此window["someClass.methodEventHandler"] 不会返回任何内容，因为没有window.someClass.methodEventHandler 属性，因此无法调用.bind()。

您可以致电：window["someClass"].methodEventHandler。

someClass = ({

    event: function(workObject, event, action) {
        workObject.addEventListener(event, action.bind(null, arguments[3]));
    },

    methodEventHandler: function(param) {
        console.log(param);
    },
});

function someEventHandler(param) {
    // Do Something
}

const workObject = document.querySelector("div");
someClass.event(workObject, "click", window["someClass"].methodEventHandler, "x");

<div>Click Me</div>

Answer 2

字符串可能会出现问题并且更难调试，但解析它是继续使用字符串的一种选择。除了字符串问题，您还需要使用var，因为let 和const 不会成为window 对象的一部分。

const someParameter = "placeholder";

var someClass = ({ // note the use of `var` :/

  event: function(workObject, event, action) {
    const func = action.split(".")
      .reduce((obj, name) => obj[name], window); // walk down the window object

    workObject.addEventListener(event, func.bind(null, arguments[3]));
  },

  methodEventHandler: function(param) {
    console.log("I am methodEventHandler");
  },
});


function someEventHandler(param) {
  console.log("I am someEventHandler");
}

const workObject = document.querySelector("button"); // just the button

someClass.event(workObject, "click", "someEventHandler", someParameter);

someClass.event(workObject, "click", "someClass.methodEventHandler", someParameter);

<button>Click me for stuff</button>