从其他侦听器调用侦听器

Question

我有两个监听器：一个调用另一个。问题是，第二个(嵌套的(侦听器是否知道第一个侦听器在文档中的何处被触发？我的意思是，当我对一列中的50个字段使用addEventListener，并在该侦听器中调用另一个侦听器时，第二个侦听器"知道"第一个侦听器的位置(我指的是单击它的字段(？我试图解决这个问题——不知道第二个侦听器是否以某种方式从第一个侦听器"继承"了"变量"值。例如：

document.querySelectorAll("#decisionList").forEach(elem => elem.addEventListener("change", function () {
var selectedOptionIndex = this.options[this.selectedIndex].index;
var invoiceDateText = this.closest('tr').querySelector('.payment').textContent.trim();
var finalChoice = this.closest('tr').querySelector('.choice');

switch (selectedOptionIndex) {
case 0:
finalChoice.innerHTML = '<input type="date">'
break;
case 1:
finalChoice.innerHTML = '<input id="finalDate" type="date">'
finalDateListener(selectedOptionIndex, invoiceDateText); //here I'm passing variables keeping current values from main Listener
default:
finalChoice.innerHTML = ''
}}));


function finalDateListener(selectedOptionIndex, invoiceDateText){
const finalDate = document.getElementById("finalDate"); //'id' from parent Listener
finalDate.addEventListener("change", function () {
alert(invoiceDateText + ' ' + selectedOptionIndex); 
});
}

这段代码只适用于第一次触发第二个侦听器(所以当我调用第一个侦听器，然后调用第二个(，对于接下来的侦听器，它不起作用，不会显示任何警报。这是否意味着我需要再次在第二个监听器中寻找最接近的元素？

Answer 1

如果您使用document.createElement而不是在innerHTML中键入字符串来创建新的输入元素，那么您可以将新输入元素传递给第二个函数，并且根本不需要id。

document.querySelectorAll("#decisionList").forEach(elem => elem.addEventListener("change", (event) => {
console.log("you clicked " + event.target)
var finalChoice = event.target.closest('tr').querySelector('.choice')
var inputElement = document.createElement("input")
inputElement.type = "date"
finalChoice.appendChild(inputElement)
finalDateListener(inputElement, selectedOptionIndex, invoiceDateText)
}))
function finalDateListener(element, selectedOptionIndex, invoiceDateText){
console.log("the new input element is " + element)
element.addEventListener("change", ()=> {
console.log("changed")
})

}