gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:11:48 25 4
gpt4 key购买 nike

所以我试图在表单提交中阻止 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com