如何在JavaScript点击事件监听器中获取日历元素的data-dn属性值

你可以通过以下两种方式在点击事件中获取目标元素的data-dn属性值：

方法1：使用getAttribute()方法 #

在事件处理函数中，通过event.currentTarget（指向绑定事件的元素）调用getAttribute('data-dn')来获取属性值：

var calenderSelection = document.getElementsByClassName("bkiavanae");
for (var i = 0; i < calenderSelection.length ; i++) {
  calenderSelection[i].addEventListener("click",
    function (event) {
      event.preventDefault();
      // 获取data-dn的值
      var selectedDate = event.currentTarget.getAttribute('data-dn');
      console.log(selectedDate); // 输出示例：02 May 2024
    },
    false);
}

方法2：使用dataset属性 #

HTML5提供的dataset属性可以更简洁地获取自定义data属性，直接访问dataset.dn即可（属性名需去掉前缀data-）：

var calenderSelection = document.getElementsByClassName("bkiavanae");
for (var i = 0; i < calenderSelection.length ; i++) {
  calenderSelection[i].addEventListener("click",
    function (event) {
      event.preventDefault();
      // 获取data-dn的值
      var selectedDate = event.currentTarget.dataset.dn;
      console.log(selectedDate); // 输出示例：02 May 2024
    },
    false);
}

额外提示 #

你的HTML中多个日历元素使用了同一个id="selectiondate"，这违反了HTML规范（id必须为页面唯一值），虽然当前功能不受影响，但后续维护可能引发问题，建议有条件时修改为唯一id。

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