添加事件监听器如何在触发后保存变量

Question

我希望更好地了解侦听器在这种情况下如何工作，我有一个 JS 文件，其中我只是放置与我的匹配的所有索引放置在段落中并在循环结束后显示它。我的问题是，如果我将变量放在添加事件侦听器的函数中，它总是会更新，我点击按钮，但如果我将变量放在 addeventlistener 的范围之外，它就会重复。

let Para = document.querySelector('p');

//Case when i put let n and inx inside add event listener
let btn = document.querySelector('button').addEventListener("click", function (){
    let n = 0;
    let inx = [];
    //find all /n ending and holding up their index
    for(X in Para.textContent){
        Para.textContent[X] == '\n' ? inx[n] = X : "";
        if( Para.textContent[X] == '\n') n++;
    }
    console.log('All "/n" are in the indexs : ' + inx);
    

});

/*DOM normal*/
body{
    background-color: black;
}
p{
    color: white;
}

<body>
    <p>Any paragrph
        with
        breaked lines
        to test all my \n
        catch
    </p>
   
    <button id="catch">CATCH</button>
</body>
</html>

它导致一遍又一遍地调用 inx 和 n 我总是点击 btn，因为它是一个新数组和一个新 n 变量：

但是如果我将 n 和 inx 变量放在 addevent 范围之外，显示就会变得混乱，并且在数组内重复多次相同的输出。

当变量在其作用域内时，侦听器只有一致的方式来处理变量？

Answer 1

您观察到的行为与 JavaScript 中变量的作用域方式有关，特别是在使用事件侦听器以及 JavaScript 如何处理闭包时。

事件监听器内部变量与外部变量事件监听器内的变量：当你声明 let n = 0;并让 inx = [];在事件侦听器函数内部，每次触发事件侦听器时（例如，每次单击按钮时）都会初始化这些变量。由于每次单击都会重新初始化它们，因此变量是新鲜的并从初始状态开始。

结果：事件监听器按预期工作，收集了并在每次单击按钮时正确显示它们。事件监听器外部的变量：当你声明 let n = 0;并让 inx = [];在事件侦听器函数之外，这些变量在每次按钮单击之间保留其值。由于 inx 不断累积先前单击的值，因此会附加先前单击的索引，从而导致 inx 数组中出现重复的条目。

结果：每次单击按钮都会将新索引附加到现有的 inx 数组，而不是重新开始。

添加事件监听器如何在触发后保存变量

问题描述投票：0回答：1

1个回答

最新问题

添加事件监听器如何在触发后保存变量

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1