如何在直接添加到 HTML 文件时删除事件监听器

Question

有一个我要添加到页面的内部按钮HTML按钮上有一个事件监听器onclick="addWatchlist()"并且在下面，我将从另一个事件侦听器的按钮，但我不能用 removeEventListener("click",addWatchlist). 我已阅读：

Javascript removeEventListener not working
他们是关于删除使用 javascript addEventListener 添加的事件。但是这里我们直接将事件添加到 HTML。

<button class="watch-list-btn" onclick="addWatchlist()">Watchlist </button>

watchlist.addEventListener("click",function(){
    conatinerDown.innerHTML =""
    conatinerDown.innerHTML +=movieWatchlistArray.map(each=> {       
        return each.outerHTML
    }).join("")
// loop through  movie list and changes text and removes event listener.
    for(let i=0 ;i<moviePageNumber;i++ ){
        document.querySelector(`.movie-${i} .watch-list-btn`).textContent = "remove"
        document.querySelector(`.movie-${i} .watch-list-btn`).removeEventListener("click",addWatchlist)
    }
    
})

// adds movie to start of an array called  movieWatchlistArray
function addWatchlist(){
    
    movieWatchlistArray.unshift(document.querySelector(`.movie-${moviePageNumber-1}`))
    console.log(movieWatchlistArray)
    
}

有没有办法删除该事件？无需将 HTML 更改为类似 :

<button class="watch-list-btn">Watchlist </button>

Answer 1

您可以获取元素并将onclick属性设置为null。

function addWatchlist() {
  console.log('addWatchlist');
}

function removeListener() {
  const button = document.getElementsByClassName('watch-list-btn')[0];
  button.setAttribute('onclick', null);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/marx/4.0.0/marx.min.css" rel="stylesheet"/>
<button class="watch-list-btn" onclick="addWatchlist()">Watchlist</button>
<button onclick="removeListener()">Remove Listener</button>

Answer 2

<button class="watch-list-btn" id="watch-list-btn">Watchlist </button>
<button class="watch-list-btn" id="remove-event">Watchlist </button>

现在你可以写 javascript

let btn = document.getElementById('watch-list-btn');

function clickHandler(){
    console.log('Clicked')
}
btn.addEventListener('click', clickHandler);

// Remove event on button click
let remove = document.getElementById('remove-event');
remove.addEventListener('click', function(){
    btn.removeEventListener('click', clickHandler);
});

此代码适合您。

如何在直接添加到 HTML 文件时删除事件监听器

how to remove an eventlistener when it's directly added on HTML file

html

javascript

dom-events