Javascript 从其他侦听器调用侦听器

我有两个侦听器：一个调用另一个。问题是，第二个（嵌套的）侦听器是否知道第一个侦听器在文档中的何处被触发？我的意思是，当我对一列中的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); 
 });
}

document.queryselectoral（#decisionList”）.forEach（elem=>elem.addEventListener（“change”），函数（）{
var selectedOptionIndex=this.options[this.selectedIndex].index；
var invoiceDateText=this.closest（'tr'）.querySelector（'.payment'）.textContent.trim（）；
var finalChoice=this.closest（'tr'）.querySelector（'.choice'）；
开关（选择选项索引）{
案例0：
finalChoice.innerHTML=“”
打破
案例1：
finalChoice.innerHTML=“”
FinalDataListener（selectedOptionIndex，invoiceDateText）；//这里我传递的变量从主侦听器保存当前值
违约：
finalChoice.innerHTML=“”
}}));
函数finalDataListener（selectedOptionIndex，invoiceDateText）{
const finalDate=document.getElementById（“finalDate”）；来自父侦听器的/id
finalDate.addEventListener（“更改”，函数（）{
警报（invoiceDateText+“”+selectedOptionIndex）；
});
}

---

此代码仅适用于第二个侦听器的第一次触发（因此，当我调用第一个侦听器，然后调用第二个侦听器），对于下一个不起作用的侦听器，不会显示任何警报。这是否意味着我需要再次在第二个侦听器中查找最近的元素？

如果您使用

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")
    })
    
}

---

这回答了你的问题吗？按照web标准，ID在文档中应该是唯一的。您正在查找的id不是相对于父侦听器的，而是相对于整个文档的，并且只返回一个，第一个是的，但问题是如何在代码中更改它，使id相对于父侦听器。我尝试了很多东西，但在vainbut它不起作用。在子侦听器中使用event.target时，控制台中出现错误：

Site.js:78未捕获类型错误：无法读取HTMLSelectElement的FinalDataListener（Site.js:78）处null的属性“addEventListener”。（Site.js:61）

OK，我更新了答案。您可以使用

createElement

创建新的输入元素。该元素可以传递给下一个函数。