- ベストアンサー
prototype.jsを利用したイベントの登録について
- prototype.jsを使ったイベントの登録方法について困っています
- イベントの登録で動的に生成した要素の背景色がうまく変更されません
- コードを確認したところ、リスナー関数で最後に生成された要素のみが変更されてしまっています
- maxfactor
- お礼率75% (3/4)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1>…ということでよろしいのでしょうか？ 私の理解している処（なので、間違っているかも知れません、話半分で聴いて下さい）では、 コールバック関数にbind(this)すると言うことは、this（この場合は、view)の中でその関数を呼び出すことです。 ここで呼び出される関数は、定義された時の（ｄの）値を中味として実行されるのではなくて、呼び出された時にその（ｄの）中味を実行するので、ループが終了した最後のｄ（ループで置き換えられるから）が使われるのだと思います。（つまり変数名でアクセスされその定義した時の中味にアクセスされるのではない） なので、この場合、ｄを１つの変数でアクセスするのでなく、それぞれのオブジェクトでアクセスできた方がいいとわかります。 それで、this.div にしてみました。 view のままでも配列にして保持するとか Event.observe を使わないで d.onclick=function(){alert(this.id)}; のようにもできると思います。 また、 click:function(){ alert(this.div.id); } のようにメソッド定義をして Event.observe(this.div,'click', this.click.bind(this),false); のようにもできると思います。（どちらかというと、こちらの方がbindしてるという感じになるような）
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
prototype.js って普段使っていないのでオオボケかましてたらすみません。 ＞基本的なところが間違っているのでしょうか？ 質問にあるソースでbind(this) されている'this' は、何かということを勘違いされているのだと思います。 なるべく、元の形を活かして書き直してみました。 ---------------------------------------------------------------- <script type="text/javascript"> cDiv = new Class.create(); cDiv.prototype = { initialize:function(id, html){ this.div = document.createElement('div'); this.div.id = id; this.div.innerHTML = html; //better? : bind -> bindAsEventListener Event.observe(this.div,'mouseover', function(){this.div.style.background='#aaa';}.bind(this),false); Event.observe(this.div,'mouseout', function(){this.div.style.background='transparent';}.bind(this),false); Event.observe(this.div,'click', function(){alert(this.div.id);}.bind(this),false); } }; view = new Class.create(); view.prototype = { initialize:function() { var view = $('viewContents'); var idName = 'test'; for (var i=0; i<10; i++) { var id = idName + i; var div = new cDiv(id, id).div; view.appendChild(div); } } }; </script>
お礼
書き直していただいたコードで実行することにより、期待した動作になりました。ありがとうございます。 ＞bind(this) されている'this' は、何かということを勘違いされているのだと思います。 ですが、動的に生成した要素の Class オブジェクト一つ一つにイベントを登録しないといけないのに、ひとつしか生成していない View オブジェクトにイベントを割り当てたために、おかしな動作になってしまった。 ということでよろしいのでしょうか？
お礼
丁寧なご説明ありがとうございます。 ＞呼び出された時にその（ｄの）中味を実行するので、ループが終了した最後のｄ（ループで置き換えられるから）が使われるのだと思います。 で、何とかですが理解することができました。 ありがとうございました。