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。

注意：

您还可以在DOMContentLoaded上使用document事件，而不是Window.load。不同之处在于，一旦加载并解析了页面中的HTML，DOMContentLoaded就会启动。 Window.load将等待页面资源加载。

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

1 个答案: