将具有 addEventListener 和参数的箭头函数转换为常规 ES5 函数

Posted 2023-05-09

【中文标题】将具有 addEventListener 和参数的箭头函数转换为常规 ES5 函数

【英文标题】：Converting Arrow Function that has addEventListener and Parameter Into a Regular ES5 Function

【发布时间】：2019-07-10 00:00:54

【问题描述】：

我在将带有 addEventListener 和参数的箭头函数转换为常规 ES5 函数时遇到了一些问题。

试图转换这个（按预期工作）：

element.addEventListener('jplist.state', (e) => 
    //do something
);

进入这个（不工作）：

element.addEventListener("jplist.state", function(e)
    //do something
);

但我假设我遗漏了一些东西（从JPList filter plugin 获得的原始箭头函数）。

我进行此更改的原因是因为 IE11 会为 => 引发错误，即使使用 polyfill。

【问题讨论】：

试试function(e) /*do something*/ .bind(this) 虽然这绝对不是您链接的代码中的箭头，因为它甚至不使用this。

请分享完整的错误信息

完全错误是：SCRIPT1002：语法错误

【参考方案1】：

首先，你不能 polyfill 新语法。由正在使用的 javascript 引擎评估，引擎不能被 JavaScript 修改。

其次，将(e) => 更改为function (e) 没有区别，因此更改语法并不是错误。

【讨论】：

感谢您的回复...从外观上看，IE11 不适用于新的箭头功能。感谢您指出 polyfill 不会解决它。我发帖的主要目标是看看是否有一个可行的解决方案可以用上面的原始解决方案代替。我完全有能力改变这一点。它可以工作，但我的替代方案不起作用，而且我正在使用“jplist.state”事件侦听器。当我使用 addEventListener("click"... event.

测试它时它可以工作

我认为这些类型的函数中的每一个都是可以互换的（主要区别在于语法）......无法理解为什么不考虑自定义事件（范围或其他东西？）。

你是否在你的事件监听器中使用了this？

我根据上面@connexo 的评论添加了它，但这不起作用......我不确定这样做的原因是什么。不知道在哪里添加或为什么。我对常规函数的原始更改适用于“点击”事件......但不适用于自定义“jplist.state”。带有“this”的更新：element.addEventListener("jplist.state", function(e) alert('hi'); .bind(this));

@EdgarAlcantara 请查看this JavaScript sample 了解有关箭头函数如何绑定的更多信息。

【参考方案2】：

函数语法的变化（从箭头函数到常规）。这里的问题与我对addEventListener 的使用有关，并且忽略了我需要为我的情况所需的 useCapture 参数提供 ", true" 的事实。

所以最后我用了：

element.addEventListener("jplist.state", function(e)
    //do something
, true);