删除重复的事件侦听器

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>