javascript - 如何在 Javascript 中取消绑定(bind)按钮上的现有点击事件并将其替换为新事件

Question

基本上我想做的是:

我克隆了一个按钮，并用克隆的按钮隐藏了现有按钮。我想在克隆按钮上绑定(bind)一个新功能，并希望删除以前的事件。

我尝试过removeEventListener()，但没有成功。

我分享了一段代码以便更好地理解。

let formSelector = document.querySelectorAll('form[action="/cart/add"]');
formSelector.forEach(function(e) {
e.setAttribute("data-plusbooster-offer", true);
let addToCart__button = e.querySelectorAll('[name="add"]') 
                      || e.querySelectorAll('[type="submit"]') 
                      || e.querySelectorAll(__addToCart__class__static);


addToCart__button.forEach(function(response) {
    let cloneBtn = response.cloneNode(true);
    cloneBtn.classList.add(["plusbooster__btn"],["__addUpsell"]);

    cloneBtn.setAttribute("onclick", "removeThat(this)");

    response.parentNode.insertBefore(cloneBtn, response);
    response.classList.add("plusbooster__hidden");
    response.style.display = "none";
  });
});

Answer 1

使用addEventListener和removeEventListener提供对相同事件处理函数的引用

You can remove an Event Listener only if you have a reference to the function used as a handler when the event listener was added. If an annonymous function is used, the listener will not be removable.

您可以在以下示例中看到附加和删除事件监听器的适当方法:

// select element
let myElement = document.getElementById('myElement');

// Handler 1
function myHandler_1(e){
    alert('Handler 1')
}

// Handler 2
function myHandler_2(e){
    alert('Handler 2')
}

// add a click event listener using myHandler_1()
myElement.addEventListener('click',myHandler_1)
// remove the previous assigned event handler
myElement.removeEventListener('click',myHandler_1)

// add another click event listener using myHandler_2()
myElement.addEventListener('click',myHandler_2)

// test : on click event you will see how the first 
// listener has been removed, and instead only the 
// second one is triggered

<div id="myElement">click me</div>

You can find more details and considerations in mozilla developer pages