要素内のすべてのリスナーを削除するにはどうすればよいですか？

Question

私がボタンを持っている、と私はそれにいくつかのeventlistnersを追加しました：

document.getElementById("btn").addEventListener("click", funcA, false); 
document.getElementById("btn").addEventListener("click", funcB, false); 
document.getElementById("btn").addEventListener("click", funcC, false); 
document.getElementById("btn").addEventListener("blur" , funcD, false); 
document.getElementById("btn").addEventListener("focus", funcE, false); 

<button id="btn">button</button> 

私はして削除することができます

私がしたい場合、私は一度にすべてのリスナーを削除したい、または私は何

document.getElementById("btn").removeEventListener("click",funcA); 

関数リファレンス（funcA）がありませんか？それを行う方法はありますか、それとも1つずつ削除する必要がありますか？

Answer 1

私はこれを行うための最速の方法は、ちょうどすべてのイベントリスナーを削除しますた、ノードのクローンを作成することであると思う：

var old_element = document.getElementById("btn"); 
var new_element = old_element.cloneNode(true); 
old_element.parentNode.replaceChild(new_element, old_element); 

ちょうどのすべての子要素でこの意志も明らかイベントリスナーとして、注意が必要問題のノードです。したがって、保持したい場合は、一度に1つずつリスナーを明示的に削除する必要があります。あなたはjQueryのに反対していない場合は

Answer 2

、これは1行で行うことができます

のjQuery 1.7以降

$("#myEl").off() 

jQueryの< 1.7

$('#myEl').replaceWith($('#myEl').clone()); 

ここです例：

ここでは

http://jsfiddle.net/LkfLezgd/3/

Answer 3

もcloneNodeに基づいている機能だが、唯一の親ノードのクローンを作成し、すべての子どもたちを移動するためのオプション（そのイベントリスナーを維持するために）で：

function recreateNode(el, withChildren) { 
    if (withChildren) { 
    el.parentNode.replaceChild(el.cloneNode(true), el); 
    } 
    else { 
    var newEl = el.cloneNode(false); 
    while (el.hasChildNodes()) newEl.appendChild(el.firstChild); 
    el.parentNode.replaceChild(newEl, el); 
    } 
} 

イベントリスナーを削除します一つの要素に：

recreateNode(document.getElementById("btn")); 

要素とその子のすべてのイベントリスナーを削除します。

recreateNode(document.getElementById("list"), true); 

---

あなたがオブジェクト自体を維持する必要があり、したがって、cloneNodeを使用できない場合は、addEventListener機能をラップし、this answerのように、自分でリスナーリストを追跡する必要があります。