要素リストをループで回して addEventListener するみたいな、よくあるサンプルを断罪してみる - hogehoge @teramako

function setButtonHandler () { var buttons = document.querySelectorAll(".hogeButton"); for (var i = 0, len = buttons.length; i < len; ++i) { (function(n) { buttons[i].addEventListener("click", function() { alert(n); }); }(i)); } } って感じのコードってあるじゃないですか。JavaScript で陥りがちな落とし穴を解決するみたいな感じで。 でも、これって本当は良いコードじゃないよね。 (function(n) {.... }(i)) が格好わるいっていうか、毎回即時関数実行かよっていうね click のハンドラーも同じコードなのにループ数分生成しちゃってるよねー

[ArcCosine]

毎回即時関数実行大好きです。ごめんなさい(´；ω；｀)

[Knoa]

スクリプトエンジン側がうまいこと解釈してくれるようにはならないのかなぁ。

[y-imaya]

どっちもよくやる

[n2s]

addEventListener時に毎回無名関数を作っちゃうところをdataset(data-*属性)やバブリングで解消。忘れがち(自戒)だけど使いこなせると強力 / あとはhandleEvent付きObjectがあれば…いやこれも関数は共有でもObjectは毎回作るし…