Question

submit是Javascript中的保留字吗？

看看这段代码：

<html>
  <head>
    <script>
    function sayHello(){
        console.log('Hello!');
    }

    function submit(){
        console.log('Submit!')
    }
    </script>
  </head>
  <body>
    <form>
      <button onclick="sayHello()">Say hello</button>
      <button onclick="submit()">Submit</button>
    </form>

    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="submit()">Submit - outside</button>
  </body>
</html>

我试图理解为什么我不能在submit()标记内调用<form>函数，但它在标记之外有效。我认为这是一个保留字，即使因为更改函数名称脚本运行良好但我在mdn上找不到任何相关信息

我不是JS大师，有人能帮助我理解这种奇怪的行为吗？

Answer 1

问题是submit()是一个内置函数，只要提交<form>就会调用它。要提交表单的自定义功能，您不仅需要使用不同的函数名称，还要阻止使用event.preventDefault()提交默认表单，并将事件传递给函数。

这可以在以下内容中看到 - 请注意sayHello()将清除屏幕（尝试提交表单），而customSubmit()则不会：

<html>
  <head>
    <script>
    function sayHello(){
        console.log('Hello!');
    }

    function customSubmit(e){
        e.preventDefault();
        console.log('Submit!')
    }
    </script>
  </head>
  <body>
    <form>
      <button onclick="sayHello()">Say hello</button>
      <button onclick="customSubmit(event)">Submit</button>
    </form>

    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="customSubmit(event)">Submit - outside</button>
  </body>
</html>

Answer 2

表单中的按钮会自动提交表单，只要该按钮没有事件处理程序，或者具有不preventDefault()的事件处理程序：

<form>
  <button>Say hello</button>
  <button>Submit</button>
</form>

（查看表单的提交方式 - 代码段中的页面消失了）

它与submit函数名无关。

但是，使用内联事件处理程序仍然是一种不好的做法，导致代码性能差，难以管理的代码。请认真考虑使用JavaScript附加您的活动，例如：https://developer.mozilla.org/en/DOM/element.addEventListener。

应避免内联处理程序，同时应避免使用eval。

如果您想阻止表单中的按钮提交表单，请像这样致电e.preventDefault()：

function sayHello(){
  console.log('Hello!');
}
function submit(){
  console.log('Submit!')
}
const [b1, b2] = Array.from(document.querySelectorAll('button'));
b1.addEventListener('click', (e) => {
  e.preventDefault();
  sayHello();
});
b2.addEventListener('click', (e) => {
  e.preventDefault();
  submit();
});

<form>
  <button>Say hello</button>
  <button>Submit</button>
</form>

Answer 3

按表单中的按钮会重新加载页面。

<html>
  <head>
  </head>
  <body>
    <!--Any button in the form will submit the form and reload the page-->
    <form>
      <button id="btn1">Say hello</button>
      <button id="btn2">Submit</button>
      <button>Anything</button>
    </form>

    <!--these ones don't-->
    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="submit()">Submit - outside</button>
    <script>
      // notice the page loads when we click the 'anything' button, even without an event handler
      //the delay allows you to see it happening

      console.log("loading page...");
      setTimeout(welcome, 500);

      function welcome() {
        console.log("page has been loaded");
      }

      // adding preventDefault to these, stops the form from submitting
      function sayHello(e) {
          console.log('Hello!');
          e.preventDefault();
      }

      function submit(e) {
          console.log('Submit!')
          e.preventDefault();
      }


      //This is how you add event handlers

      let btn1 = document.getElementById('btn1');
      let btn2 = document.getElementById('btn2');

      btn1.addEventListener('click', sayHello);
      btn2.addEventListener('click', submit);
    </script>
  </body>
</html>

Javascript - 命名函数'submit（）'的奇怪行为

3 个答案: