Javascript focus事件首次不生效求助：jQueryUI日期选择框场景

使用带有jQueryUI日期下拉选择的输入字段时，尝试通过focus和blur事件实现逻辑：当用户选中今日日期时执行脚本，否则不执行。但当前代码存在问题：首次触发focus事件时无响应，第二次操作才会弹出提示。

原代码如下：

<script>
    document.addEventListener("DOMContentLoaded", function() {
      var deliveryDateInput = document.getElementById("delivery_date");

      deliveryDateInput.addEventListener("focus", function() {
        // Remove the previous blur event listener, if any
        this.removeEventListener("blur", handleDateBlur);
        
        // Attach the blur event listener
        this.addEventListener("blur", handleDateBlur);
      });

      function handleDateBlur() {
        var selectedDateParts = this.value.split("/");
        var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
        var today = new Date();
        today.setHours(0, 0, 0, 0);

        if (selectedDate.getTime() === today.getTime()) {
          alert("Hello! You've selected today's date.");
        }
      }
    });
</script>

原代码的逻辑是在focus事件触发时才给输入框绑定blur事件监听。第一次用户点击输入框触发focus，此时才完成blur监听的绑定，但这次操作后的blur事件（选完日期离开输入框）已经在绑定前触发了，所以不会执行handleDateBlur；第二次focus时再次绑定（其实第一次绑定后已经存在，解绑再绑定没必要），后续的blur才能触发回调，导致第一次操作无响应。

方案1：直接绑定blur事件（简化原生事件逻辑） #

不需要在focus里反复绑定解绑，DOM加载完成后直接给输入框绑定blur事件即可，这样每次blur都会触发检查：

document.addEventListener("DOMContentLoaded", function() {
  var deliveryDateInput = document.getElementById("delivery_date");

  // 直接绑定blur事件，无需在focus中处理
  deliveryDateInput.addEventListener("blur", handleDateBlur);

  function handleDateBlur() {
    var selectedDateParts = this.value.split("/");
    // 增加判断，避免值为空时报错
    if (selectedDateParts.length !== 3) return;
    
    var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
    var today = new Date();
    today.setHours(0, 0, 0, 0);

    if (selectedDate.getTime() === today.getTime()) {
      alert("Hello! You've selected today's date.");
    }
  }
});

方案2：利用jQueryUI日期选择器的原生事件（更可靠） #

因为输入框是jQueryUI的日期控件，直接使用控件提供的onSelect事件会更准确，无需依赖focus/blur，用户选中日期时立即触发检查：

document.addEventListener("DOMContentLoaded", function() {
  // 初始化或修改jQueryUI日期选择器的事件
  $("#delivery_date").datepicker({
    onSelect: function(dateText) {
      var selectedDateParts = dateText.split("/");
      var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
      var today = new Date();
      today.setHours(0, 0, 0, 0);

      if (selectedDate.getTime() === today.getTime()) {
        alert("Hello! You've selected today's date.");
      }
    }
  });
});

注意：如果页面已经初始化过日期选择器，直接调用datepicker("option", "onSelect", function(){...})来修改事件即可，避免重复初始化。

内容的提问来源于stack exchange，提问作者Waleed Akhtar