如何用JavaScript为calendar-wrapper添加点击事件获取日期年份？

当前静态日历需要添加点击事件以获取日期和年份，现有代码如下：

HTML代码 #

<div class="calendar-wrapper">
<button id="btnPrev" type="button">Prev</button>
  <button id="btnNext" type="button">Next</button>
<div id="divCal"></div>

JavaScript代码 #

var Cal = function(divId) {

//Store div id
this.divId = divId;

// Days of week, starting on Sunday
this.DaysOfWeek = [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
];

// Months, stating on January
this.Months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 
'September', 'October', 'November', 'December' ];

// Set the current month, year
var d = new Date();

this.currMonth = d.getMonth();
this.currYear = d.getFullYear();
this.currDay = d.getDate();

};

// Goes to next month
Cal.prototype.nextMonth = function() {
if ( this.currMonth == 11 ) {
 this.currMonth = 0;
 this.currYear = this.currYear + 1;
}
else {
 this.currMonth = this.currMonth + 1;
}
this.showcurr();
};

要给日历日期添加点击事件并获取日期、年份，需结合日历渲染逻辑完成以下操作：

1. 完善日历渲染时的事件绑定 #

在showcurr方法（日历核心渲染逻辑）生成日期元素时，为每个日期节点绑定点击事件，同时存储日期信息：

// 示例：在showcurr方法的日期生成循环中添加
Cal.prototype.showcurr = function() {
  var calContainer = document.getElementById(this.divId);
  calContainer.innerHTML = ''; // 清空容器

  // 省略月份标题、星期表头的渲染代码...

  // 生成当月日期
  var firstDay = new Date(this.currYear, this.currMonth, 1).getDay();
  var daysInMonth = new Date(this.currYear, this.currMonth + 1, 0).getDate();

  for (var i = 0; i < firstDay + daysInMonth; i++) {
    if (i >= firstDay) {
      var day = i - firstDay + 1;
      var dayElement = document.createElement('div');
      dayElement.className = 'calendar-day';
      dayElement.textContent = day;

      // 绑定点击事件
      dayElement.addEventListener('click', () => {
        var selectedDate = `${this.currYear}-${this.currMonth + 1}-${day}`;
        console.log('选中日期：', selectedDate);
        // 此处可添加后续业务逻辑，比如展示选中结果、提交数据等
      });

      calContainer.appendChild(dayElement);
    } else {
      // 填充上月占位日期，可添加类名区分
      var emptyElement = document.createElement('div');
      emptyElement.className = 'calendar-empty';
      calContainer.appendChild(emptyElement);
    }
  }
};

2. 更高效的事件委托方式 #

如果日历频繁切换月份（动态生成元素），推荐使用事件委托，只需给日历容器绑定一次事件：

// 在Cal构造函数中添加事件委托
var Cal = function(divId) {
  // 原有代码...

  var calContainer = document.getElementById(this.divId);
  // 绑定容器点击事件
  calContainer.addEventListener('click', (e) => {
    // 判断点击的是有效日期元素
    if (e.target.classList.contains('calendar-day')) {
      var day = e.target.textContent;
      var selectedDate = `${this.currYear}-${this.currMonth + 1}-${day}`;
      console.log('选中日期：', selectedDate);
      // 后续业务逻辑处理
    }
  });
};

3. 补充按钮点击事件 #

别忘了给Prev/Next按钮绑定切换月份的事件，确保日历能正常切换：

// 初始化日历后绑定按钮事件
var calendar = new Cal('divCal');
calendar.showcurr();

document.getElementById('btnPrev').addEventListener('click', () => {
  // 补充实现prevMonth方法，逻辑类似nextMonth
  if (calendar.currMonth == 0) {
    calendar.currMonth = 11;
    calendar.currYear -= 1;
  } else {
    calendar.currMonth -= 1;
  }
  calendar.showcurr();
});

document.getElementById('btnNext').addEventListener('click', () => {
  calendar.nextMonth();
});

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