时间戳

首页 > 解决方案 > 箭头函数不适用于 onClick 事件处理程序

javascript - 箭头函数不适用于 onClick 事件处理程序

问题描述

是否可以像在第一个按钮（aBtn1）的 onclick 事件处理程序上那样使用箭头功能？有人可以解释为什么第一种方法失败了吗？

<script>
    var arrFunc = () => {
        console.log('test btn clicked');
    };
</script>
<form>
    <label for="name">Name</label>
    <input type="text" value="" id="name" />
    <input type="button" name="aBtn1" value="Test" onclick="() => { console.log('test button clicked'); }" />
    <input type="button" name="aBtn2" value="Test" onclick="arrFunc();" />
    <input type="submit" value="Submit" />
</form>

标签： javascript

解决方案

第一个选项仅声明了一个不调用它的函数。您需要在声明后调用它。(() => { console.log('test button clicked'); })()这没有什么意义，你可以简单地使用函数的主体。

var arrFunc = () => {
  console.log('test btn clicked');
};
<form>
  <label for="name">Name</label>
  <input type="text" value="" id="name" />
  <input type="button" name="aBtn1" value="Test" onclick="(() => { console.log('test button clicked'); })()" />
  <input type="button" name="aBtn2" value="Test" onclick="arrFunc();" />
  <input type="submit" value="Submit" />
</form>

推荐阅读