[英]How properly add event using addEventListener?
我正在尝试向div元素添加click事件,但它不起作用。
链接到js文件在body标签下,因此元素divContainer已经存在。 我尝试使用appendChild添加div-element,并在浏览器控制台和工作者中添加事件。
我不想添加完整的代码,但现在是。 我只是不明白为什么addEventListener在这里不起作用。
function DatePicker(id, callback) {
let monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
this.render = function (date) {
let divContainer = document.getElementById(id);
let selectedDay = date.getDay() !== 0? date.getDay() : 7;
let prevMonth = new Date(date.getFullYear(), date.getMonth(), 1 - selectedDay);
let month = new Date(date.getFullYear(), date.getMonth(), 1);
let nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
let firstDayInMonth = month.getDay() !== 0? month.getDay() : 7;
let lastDayInMonth = nextMonth.getDay() !== 0? nextMonth.getDay() : 7;
divContainer.innerHTML = '';
divContainer.innerHTML +=
'<div class="header"><div class="triangle-left" onclick="goPrev(this.parentElement)"></div>' +
monthNames[date.getMonth()] + ' ' + date.getFullYear() +'<div class="triangle-right" onclick="goNext(this.parentElement)"></div></div>';
divContainer.innerHTML += '<div><a>Mon</a> <a>Tue</a> ' +
'<a>Wed</a> <a>Thu</a> <a>Fri</a>' +
'<a>Sat</a> <a>Sun</a></div><hr>';
for(let i = 0; i < firstDayInMonth - 1; ++i)
{
divContainer.innerHTML += '<div class="anotherMonth" onclick="goPrev(this)">'+(prevMonth.getDate() + 1 + i)+'</div>';
}
for(let i = 0; i < nextMonth.getDate(); ++i)
{
if((i+1) === date.getDate()) {
let div = document.createElement('div');
div.classList.add('selectedDate');
div.innerText = 1+i;
divContainer.appendChild(div);
div.addEventListener("click", function(){ alert("Hello World!");});
}
else {
let div = document.createElement('div');
div.classList.add('currentMonth');
div.innerText = 1+i;
divContainer.appendChild(div);
div.addEventListener("click", function(){ alert("Hello World!"); });
}
}
for(let i = 0; i < 7 - lastDayInMonth; ++i)
{
divContainer.innerHTML += '<div class=\"anotherMonth\" onclick="goNext(this)">'+(1 + i)+'</div>';
}
};
}
只要将有效的id
传递给.getElementById()
并且该元素已经被解析为DOM,代码就可以工作:
// You must pass a string with a valid id let divContainer = document.getElementById("container"); for(let i = 0; i < 10; ++i) { let div = document.createElement('div'); div.classList.add('selectedDate'); div.textContent = 1+i; // Use textContent. innerText is non-standard div.addEventListener("click", function(){ alert("Hello World!"); }); divContainer.appendChild(div); // Append last for better performance in many cases }
<div id="container"></div>
在引用现有元素时,您的代码可以正常工作:
let divContainer = document.getElementById('existing'); for(let i = 0; i < 10; ++i) { let div = document.createElement('div'); div.classList.add('selectedDate'); div.innerText = 1+i; divContainer.appendChild(div); div.addEventListener("click", function(){ alert("Hello World!"); }); }
<div id="existing"></div>
但最好只在<button>
, <a>
和<input>
元素上使用click
处理程序,以提高屏幕阅读器与您的网站正常工作的能力。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.