有一個按鈕，我將使用 innerHTML 添加到頁面中，該按鈕上有一個onclick="addWatchlist()"事件偵聽器，在下面，我將通過另一個事件偵聽器從按鈕中洗掉事件，但我不能這樣removeEventListener("click",addWatchlist).
做閱讀：
- 為什么 removeEventListener 不起作用？
- 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>
uj5u.com熱心網友回復：
您可以獲取元素并將 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>uj5u.com熱心網友回復：
<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);
});
此代碼將為您作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435031.html
標籤：javascript html dom 事件
下一篇：ChartJS陣列作為一項