为什么 onsubmit 事件有效但 addEventListener 无效？答案

【问题标题】：Why onsubmit event is working but addEventListener is not?为什么 onsubmit 事件有效但 addEventListener 无效？
【发布时间】：2019-04-22 16:07:37
【问题描述】：

我想用 XMLHttpRequest 提交一个小表单。

我尝试了 onsubmit，这很好，并且工作正常（在下面的代码中注释）：

<div class='form-box'>
    <form id="send_frm" method="post" action="" >
        <div class='msg-box'>
            <textarea name="ssmsg" maxlength="500"></textarea>
        </div>
        <div class='btn-box'>
            <input class="sub-btn" name="save" type="submit" value="Mentés"/>
        </div>
    </form>
</div>
<script type="text/javascript">
    var ajaxObj = new XMLHttpRequest();
    var form = document.forms[0];
    form.addEventListener(
            "submit",
            ajaxer
        );

//    form.onsubmit = function()  /* works fine! :) */
//            {
//                return ajaxer();
//            };

    function ajaxer()
    {
        ajaxObj.onreadystatechange = 
            function()
            {
                if( this.readyState == 4 && this.status == 200 )
                {
                    console.log(ajaxObj);
                }
            }
        ajaxObj.open("POST", "<?php echo BASE_URL; ?>app/controls/msg_handler.php", true);
        ajaxObj.send('data=whatever');
        return false;
    }
</script>

但是使用 addEventListener 它不起作用，就像 onsubmit 一样。

请解释原因。非常感谢帮助。

【问题讨论】：

您的文档中还有多少其他
元素？
只有一个表单元素

标签： javascript html xmlhttprequest

【解决方案1】：

return 语句不被监听器接受，所以使用event.preventDefault() 方法来防止表单重新加载

这就是为什么这种方法有效的原因

 form.onsubmit = function() 
            {
                return ajaxer(); // function return false so code break the execution
            };

问题

var ajaxObj = new XMLHttpRequest();
var form = document.forms[0];
form.addEventListener(
  "submit",
   ajaxer
);


function ajaxer(e) {
  console.log('sss');
  return false;
}

<div class='form-box'>
  <form id="send_frm" method="post" action="">
    <div class='msg-box'>
      <textarea name="ssmsg" maxlength="500"></textarea>
    </div>
    <div class='btn-box'>
      <input class="sub-btn" name="save" type="submit" value="Mentés" />
    </div>
  </form>
</div>

解决方案

var ajaxObj = new XMLHttpRequest();
var form = document.forms[0];
form.addEventListener(
  "submit",
   ajaxer
);


function ajaxer(e) {
  console.log('sss');
  e.preventDefault();
}

<div class='form-box'>
  <form id="send_frm" method="post" action="">
    <div class='msg-box'>
      <textarea name="ssmsg" maxlength="500"></textarea>
    </div>
    <div class='btn-box'>
      <input class="sub-btn" name="save" type="submit" value="Mentés" />
    </div>
  </form>
</div>

【讨论】：