javascript - javascript - ループ内の onclick および addEventListener の removeAttribute

Question

インライン イベント トリガーを持つ多数の要素が存在する特定のケースに対処します。これらの要素は、元の要素が削除されたを介して、できればではなく を介しonclickて前処理する必要がある変数を渡します。addEventListeneronClickremoveAttributesetAttribute("onclick", null)

<div onClick="alert('shoe');">shoe</div>
<div onClick="alert('epic');">epic</div>
<div onClick="alert('dogs');">dogs</div>
<div onClick="alert('army');">army</div>

再利用と他の人への有用性のために-上記の例は単純化されていますが、IEを処理する必要はなくattachEvent、detachEventjQueryは（少なくとも私にとっては）利用できません。

いくつかのアプローチを試しましたが、最初の試行コードは次のようになりました。

var fields = document.getElementsByTagName("div");
    for (var i = 0; i < fields.length; i++) {
        word = fields[i].getAttribute("onClick").substr(7,4);
        fields[i].addEventListener("click", function() {console.log(word);}, false);
        fields[i].removeAttribute("onclick");
    }

言うまでもなく、ほとんどの派生的なアプローチでは、イベントリスナーを削除することはできましonclickたが、イベントリスナーを割り当てることはできませんでした。単語配列にデータを入力することはできましたが、最後の単語だけを使用することもできました。