javascript - onBlur 事件函数在 Vanila Javascript 中的页面加载时触发

Question

我有一个基本的验证功能和一个addEventListener附加到一个select元素。现在，该函数不仅在事件期间不会触发，而且会在pageload. 你能帮我弄清楚为什么吗？

元素是：

<select name="VisitSchedLocation" id="VisitSchedLocation" size="1">
  <option value="">Choose a location for this visit</option>
  <option value="1">Location 1</option>
  ...
</select>

是addEventListener：

document.getElementById('VisitSchedLocation').addEventListener('blur', validateVisitSchedLocation());

最后，函数：

function validateVisitSchedLocation() {
  if (VisitSchedLocation.options[VisitSchedLocation.selectedIndex].value == '') {
    alert('Location must be selected!');
    return false;
  };
}

任何帮助将不胜感激。

Answer 1

工作演示

您正在调用/调用该函数而不是将其附加到事件：

document.getElementById('VisitSchedLocation').addEventListener('blur', validateVisitSchedLocation());

而是这样做（没有括号）：

document.getElementById('VisitSchedLocation').addEventListener('blur', validateVisitSchedLocation);