事件监听器 Inside EventListener

Question

我有一个代码运行在 freshsales iframe 中。我在 iframe 中的应用程序代码放置在 iframe 加载事件侦听器中。所以我的 javascript 应用程序在应用程序 window 加载后启动。长话短说：我的应用程序运行在事件侦听器中。

但是当我在没有刷新的情况下重新加载页面时出现问题（我没有刷新，我只是从一个选项卡跳到另一个选项卡，当我打开我的应用程序工作的选项卡时，"app.activated" 事件触发，所以我的javascript 应用程序启动。到现在为止一切都很好。但是当我转到另一个选项卡并再次来到我的选项卡时，附加到我的应用程序的事件侦听器再次创建（只是我的假设）因此每次，我跳回我的应用程序，一个新的事件侦听器附加到同一个对象。所以当我点击相关对象时，会触发超过 1 个事件并且相关函数运行s 超过 1 次。

这里附上代码：

var client;
$(document).ready( function() {
    app.initialized()
        .then(function(_client) {
            client = _client;
            client.events.on("app.activated",
                function() {
                    console.log("APP LOADED");

                    //These are event listener functions that fires 2 or more times when app is loaded more than 1 time
                    let nextButtonScript = function(){
                        getReportDataAndFill(  );
                    } 
                    let prevButtonScript = function(){
                      getReportDataAndFill(  );
                    }

                    //I added these lines to prevent double attachment of event listener to same object, but that didnt helped
                    document.getElementById("skvPrevMonth").removeEventListener("click", prevButtonScript);
                    document.getElementById("skvNextMonth").removeEventListener("click", nextButtonScript);
                    //I add event listener to elements here
                    document.getElementById("skvPrevMonth").addEventListener("click", prevButtonScript);
                    document.getElementById("skvNextMonth").addEventListener("click", nextButtonScript);
                });
        });
});

所以再次总结一下，当我运行这段代码时，当我跳转到另一个选项卡并再次进入我的应用程序选项卡（触发 "app.activated" 事件）时，然后当我单击 "skvPrevMonth" 按钮，它的事件侦听器函数触发 2 次。如果我再次跳转另一个选项卡并再次出现，那么它会触发 3 次，依此类推....

非常感谢任何帮助。非常感谢。

Answer 1

您的函数 nextButtonScript 和 prevButtonScript 正在 app.activated 回调中定义。这意味着每次回调运行时，这些变量都会引用 不同的函数 ，而不是相同的。这就是它不删除旧侦听器的原因：因为您告诉它删除当前功能，但尚未添加这些功能。保留了旧的，具有不同的引用。

在你的回调范围之外定义这两个函数（它们似乎没有使用任何需要内部范围的变量）并且它应该可以工作，因为引用将在事件触发期间保持不变:)

事件监听器 Inside EventListener

Eventlistener Inside EventListener

javascript

addeventlistener

event-listener

removeeventlistener