當從數組中讀取時JavaScript沒有移除監聽器

下面我有一個小的JavaScript文件，用於爲數組中的每個數組創建元素。除了最後一個功能removeEventListeners()，所有的工作都很好。此函數不返回任何錯誤，但它不會刪除偵聽器。當從數組中讀取時JavaScript沒有移除監聽器

真的很感謝任何幫助！謝謝。

var array = [["Bob", 17, 1], ["Alan", 16, 1], ["Dave", 19, 1], ["Terry", 5, 1], ["Janet", 23, 0]]; 
var elements = []; 
var AGE = 1; 

function createHandler(i) { 
    return function() { 
    // Upon clicking the element show an alert with the age of that element (taken from array) 
    alert(array[i][AGE]); 
    } 
} 

for (var i = 0; i < array.length; i++) { 
    elements[i] = document.createElement("div"); 
    elements[i].addEventListener("click", createHandler(i), false); 
} 

// This function is where the problem lies - it doesn't remove the handlers 
function removeEventListeners() { 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].removeEventListener("click", createHandler(i), false); 
    } 
}

來源

2013-07-27 jskidd3

這是因爲，您將獨特的功能對象時，你'add'和'remove'。要刪除監聽器，需要傳遞添加時傳遞的* same *函數對象，這意味着您需要在某處引用它。 –

您可能要考慮的一點是，DOM元素是可以添加屬性的對象。如果你只是在存儲一個數字，你可以直接將它添加到元素。通過這種方式，不必爲每個元素創建唯一的處理程序，您可以命名並重復使用同一個處理程序，因此當您想從元素中刪除它時可以引用它。如果添加到元素的屬性是'my_index'，那麼在處理程序中，您可以執行'array [this.my_index] [AGE]'。我不會引用大量的數據或其他元素，但是像數字這樣的小事情並不是什麼大不了的事情。 –

的原因是creatHandler總是返回新功能，而不是你連接的相同。您應該存儲處理程序並在要刪除它們時取回它們。

var handlers = []; 
function createHandler(i) { 
    if (!handlers[i]) { 
     console.log('Created ' + i); 
     handlers[i] = function() { 
      alert(array[i][AGE]); 
     }; 
    } 
    return handlers[i]; 
}

你可以看到在行動太：http://jsfiddle.net/balintbako/TQxua/

來源

2013-07-27 15:25:24

啊，我明白了。我想我知道你的意思，你會介意給你的答案提供一個例子來確保嗎？謝謝 – jskidd3

欣賞編輯。感謝您的回答！ – jskidd3

當從數組中讀取時JavaScript沒有移除監聽器

回答

相關問題