如何防止onchange事件在页面加载时触发javascript

Question

我试图在change事件上获取价值，它工作正常，但是它唯一的问题就是在页面加载时也会触发。

<select id="test" name="age" onchange="sendValue()">
  <option value="yes">Test1</option>
  <option value="no">Test2</option>
</select>

function sendValue() {
  var test1 = document.getElementById("test").value;

  var xmlhttp;
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {}
  }
  xmlhttp.open("POST", "btnCompas.php?q=" + test1, true);
  xmlhttp.send();
}

如何防止这种情况在页面加载中发生？ 非常感谢。

Answer 1

您可以在窗口的加载处理程序中添加事件侦听器：

 <html> <body> <select id="test" name="age"> <option value="yes">Test1</option> <option value="no">Test2</option> </select> </body> <script> function sendValue() { console.log("(!)"); } window.addEventListener( 'load', () => { const select = document.querySelector('#test'); select.addEventListener('change', sendValue); }); </script> </html> 

这样可以保证在页面加载之前不会调用sendValue 。

---

注意：

您还可以在document上使用DOMContentLoaded事件，而不是Window.load 。 区别在于，一旦页面中的HTML加载并解析后， DOMContentLoaded就会触发。 Window.load将等待页面资源加载。