小编Pet*_*ter的帖子

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

这是代码

<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 () { …