要從按鈕中刪除事件偵聽器，您需要引用函數(shù)本身。所以在使用之前addEventListener將函數(shù)存儲在一個對象或一個數(shù)組中，或者你可以回顧并找到這個函數(shù)的地方。因為removeEventListener如果你不給它與你使用的完全相同的功能，它將無法工作addEventListener。
在下面的代碼片段中，我構(gòu)建了一個存儲這些事件偵聽器并將其稱為EventCollection. 此類用作容器并保存要添加的每個事件的列表。這樣，您可以隨時在代碼中添加或刪除所需的所有事件偵聽器，而無需做太多工作。
class EventCollection {
/**
* Create a list to store the entries in.
*/
constructor() {
this.entries = [];
this.isListening = false;
}
/**
* Add an entry to the collection to listen for on an event.
*/
append(target, type, listener, options = false) {
if (!(target instanceof EventTarget)) return;
this.entries.push({ target, type, listener, options });
return this;
}
/**
* Listen for all the entries in the list.
*/
listen() {
if (!this.isListening) {
this.entries.forEach(({ target, type, listener, options }) => {
target.addEventListener(type, listener, options);
});
this.isListening = true;
}
return this;
}
/**
* Stop listening for all the entries in the list.
*/
stopListening() {
this.entries.forEach(({ target, type, listener, options }) => {
target.removeEventListener(type, listener, options);
});
this.isListening = false;
return this;
}
}
// Create a new instance of an EventCollection
var eventCollection = new EventCollection();
var buttons = document.getElementsByTagName('button');
function myFunction(index) {
alert(index);
}
// Add all the event listeners to the collection.
for (var i = 0; i < buttons.length; i++) {
(function(i){
eventCollection.append(buttons[i], 'click', function() {
myFunction(i);
}, false);
}(i));
}
// Start listening.
eventCollection.listen();
// After 5 seconds, stop listening.
// The buttons won't work anymore.
setTimeout(function() {
eventCollection.stopListening();
}, 5000);
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
像這樣構(gòu)建集合。用new關(guān)鍵字。
// Create a new collection
var eventCollection = new EventCollection();
下一步是添加您要收聽的事件。它需要元素、事件類型和事件觸發(fā)時調(diào)用的函數(shù)。
eventCollection.append(element, 'click', function() {});
現(xiàn)在您的事件已在集合中并已存儲，但它們尚未偵聽事件。使用該.listen()方法循環(huán)遍歷集合中的所有事件并監(jiān)聽它們。
eventCollection.listen();
每當您想停止收聽集合中的事件時，請使用以下命令。
eventCollection.stopListening();
