javascript - 删除重复的事件监听器

Question

我一直在努力寻找一种方法来删除事件监听器。我创建了一个函数，它将向按钮添加一个事件监听器，但如果该函数再次运行，我希望删除并再次添加事件监听器。但相反，它只会添加另一个事件监听器，当我单击按钮时，它将运行事件监听器函数两次。或者即使我可以阻止它向按钮添加第二个事件监听器也可以。

这是代码

<button id="myId">My Button</button>
 
 
 
<script>
 
 
 
myFunction()
myFunction()
 
function myFunction() {
     var el = document.getElementById('myId')
 
     var listenerFn = function () {
          console.log('My Message')
     }
 
     el.removeEventListener('click', listenerFn)
 
     el.addEventListener('click', listenerFn)
}
 
 
 
</script>

任何提示都是最有帮助的。

更新:

@FathiAlqa​​dasi 的回答是目前为止对我的问题最好的回答。但我应该展示更多的代码。监听器功能是动态的，可以根据其功能而变化。这是我的意思的另一个例子。

<button id="myId">My Button</button>



<script>

myFunctionA()
myFunctionA()



function myFunctionA() {
    var el = document.getElementById('myId')
    myFunctionB()
    function myFunctionB() {
        if (el.innerHTML === 'My Button') {
            var listenerFn = function () {
                console.log('My Message 1')
            }

               el.removeEventListener('click', listenerFn);

            el.addEventListener('click', listenerFn);
        }

        else {
            var listenerFn = function () {
                console.log('My Message 2')
            }

               el.removeEventListener('click', listenerFn);

            el.addEventListener('click', listenerFn);
        }
    }
}
</script>

更新 2:

感谢@提供代码。这是一个整洁的代码箱中的代码

<button id="myId">My Button</button>

<script>
    var listenerFn;
    myFunction();
    myFunction()
    function myFunction() {
        var el = document.getElementById('myId')
        el.removeEventListener('click', listenerFn);
        listenerFn = function() {
            console.log('My Message')
        }
        el.addEventListener('click', listenerFn, false);
    }
</script>

Answer 1

在这个例子中，我们在同一个函数中添加和删除监听器作为替代来防止冗余监听器。

function callbackFunction() {
  console.log('Callback function was called.')
}

function addRemoveListener() {
  let el = document.getElementById('btn-test')

  el.removeEventListener('click', callbackFunction)
  el.addEventListener('click', callbackFunction)
}

addRemoveListener()
addRemoveListener()

<button id="btn-test">Button</button>