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

Question

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

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

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

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

如何在回调中访问正确的“this”？

绑定点击事件以在新标签页中打开链接

将点击事件绑定到 class 内的方法

Answer 1

someEventHandler是一个全局 function ，因此它可以称为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 object 的一部分。

 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>