blog/2008-07-29

---

Total: 1691 / Today: 1 / Yesterday: 1

getElementsByClassをDojoで

DojoでgetElementsByClassを使う場合は、dojo.queryを使うらしい。たとえば、ClassがActionのボタンを関数に入れる場合は、

dojo.query('button.Action');

だけである。また、これがクリックされたときの処理を加える場合は、

dojo.query('button.Action').connect('onClick',function(){
 …

で<button class="Action">のタグすべてのクリック時の処理がいきわたる。しかしながら、ボタンによって処理を変えたい場合もあるだろう。そこで、

dojo.query('button.Action').connect('onClick',function(elem){
  console.log(elem.target);
 …

と記述する。このelemにはクリックしたボタンの要素が記入される。実際使う場合は、elem,targetという形になるだろう。たとえば、

<button class="Action" id="submit">Submit</button>
<button class="Action" id="cancel">Cancel</button>

の場合で、id属性で処理を分けたい場合は、

dojo.query('button.Action').connect('onClick',function(elem){
  this.id = elem.target.id.replace("_text", "")); // dojo.form.Buttonの場合。
  switch(this.id){
   case 'submit':
    …
   break;
   case 'cancel':
    …
   break;

というようになる。つまり、普通にイベントリスナを入れる際のthisは、ここでは、elem.targetと等価といったところだろうか。注意したいのは、id属性に_textが追加されるところである。つまり、

<button dojoType="dijit.form.Button" class="Action" id="cancel">Cancel</button>

の場合、elem.target.id="cancel"ではアクセスできないことになる。なぜか、elem.target.idでは、cancel_textとなってしまう。そこで、elem.target.id.replace("_text", ""));を追加し、_textを削除する。

これで、通常のイベントリスナと同じように使うことができるようになる。

---

Last Modified: 2008-07-29 16:13:31