javascript - 为什么 onsubmit 事件有效但 addEventListener 无效？

Question

我有一个小表单，我想用 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 一样。

请解释原因。真的感谢帮助。

标签： javascripthtmlxmlhttprequest

Answer 1

侦听器不接受返回语句，因此使用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>