Why onsubmit event is working but addEventListener is not?

Question

I have a little form that I want to submit with XMLHttpRequest.

I tried with onsubmit, which is fine, and worked (commented in the code below):

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

But with addEventListener it did not work, like the onsubmit.

Please explain why. Really thanks the help.

Answer 1

return statement not accept by listener so do with event.preventDefault() method to prevent form reload

That's why this method as working

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

Problem

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>

Solution

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>