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

Question

有一个按钮，我要使用innerHTML添加到页面中，该按钮上有一个事件侦听器onclick="addWatchlist()"，在下面，我将从按钮中删除该事件通过另一个事件侦听器，但我无法使用 removeEventListener("click",addWatchlist) 来完成此操作。 我已阅读：

1. 为什么removeEventListener不起作用？
2. Javascript removeEventListener 不工作
   它们是关于删除使用 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);
});

这段代码将适合你。