javascript - 为什么从 onSubmit 传递的 evt 未定义?

标签 javascript html

所以我试图在表单提交中阻止 onSubmit。 我有 2 个问题。

1)e参数是从哪里传入的?

2) 为什么 e 未定义,因此无法正确阻止默认操作?每次页面都会刷新,这是我试图阻止的操作

<html>
  <head>
  </head>
  <body>
    <form onSubmit={func}>
      <input type='text'/>
      <button type='submit'/>
    </form>
    <script>
      let func = (e) => {
        console.log('BEING CALLED')
        e.preventDefault()
      }
    </script>
  </body>
</html>

最佳答案

Where is the e parameter being passed in from?

无处

Why is e undefined and therefore not correctly preventing the default action?

因为该函数没有被调用。

<小时/>
onSubmit={func}

您的 JavaScript 函数:

  1. 启动一个区 block (没有实际效果)
  2. 提及函数名称(该名称无效,因为您没有调用它、将其与运算符组合或任何其他内容)
  3. 结束区 block

一切都是为了一无所有。

<小时/>

onsubmit 属性的正确语法是:

onsubmit="func(event);"

...其中您实际调用 func 并将您试图传递的参数传递给它。 (内在事件属性自动获取一个名为 event 的参数)。

<小时/>

使用 HTML 绑定(bind)事件被认为是不好的做法,并且 they come with nasty gotchas 。通常首选将事件处理程序与 JS 绑定(bind)。

document.querySelector("form")
        .addEventListener("submit", func);

现在 func 是事件处理程序本身,它获取事件对象作为第一个参数,因为这就是事件处理程序获取的内容。

<小时/>

请注意,箭头函数是:

  1. 匿名,这使得它们在调试器中不太有用
  2. 捕获 this 的当前值(这对于事件处理程序来说通常是不受欢迎的,因为它会阻止您使用 this 来获取处理程序绑定(bind)到的元素)。<

函数声明通常更可取。

关于javascript - 为什么从 onSubmit 传递的 evt 未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41845310/

相关文章:

javascript - 禁用下拉菜单中的选项 - d3

jquery - 在 jQuery Mobile 中垂直对齐文本

javascript - 返回函数内的对象

php - 使用 jscript 显示/隐藏 div

javascript - 如何知道对象的父链?

javascript - 如何在不使用 HTML <form> 标签的情况下发送 AJAX 表单

javascript - 来自文本输入的动态链接

javascript - 我应该如何在 VS 中为我​​自己的 javascript 库创建智能感知?

javascript - 如何将具有子可观察值的函数绑定(bind)到可观察数组?

jquery - 滑动菜单 jQuery/CSS 问题