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一样。

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

Answer 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>

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

1 个答案: