javascript イベントリスナー

2014年4月17日 2014年10月16日

mikaduki

そろそろjQuery使わないでも素でjsが
書けるようになりたいなーと思ってきた今日この頃。

僕がそう思うように、きっと誰かもそう思っている。

で、そう思ってる人は、アクションによって処理が発動するのって
あれだよ！イベントハンドラだよ！とかいってイベントハンドラを調べて、
いやこれじゃないよ、jQueryみたいに上からするやつだよ！

って色々調べて、イベントリスナーにたどり着くと思います。
で、obj.addEventListener書いたら、
オブジェクトねーよってブラウザに怒られて、なんでかなーってしばらく考えて
loadイベント登録せずにheadタグの中にスクリプトが書いてあるって気がつく。

そんな春の訪れにも似た気分に心を躍らせながら、
addEventListenerを書くと思うので、知っておいたら良い奴を書いておきます。

INDEX

addEventListener

パラメータは３つ入ります。
addEventListenerの前にはイベントターゲットを付けてます。
イベントターゲットは、ノード、ドキュメント、
ういんどー、xmlなんたらリクエストです。
例としてはこんな感じになってます。

window.addEventListener("load", mainaction, true);
function mainaction()
{
     alert("hoge-");
}

この場合、ページロードが行われた場合にalert出すようにしてます。
試してないから本当に出るか分かりませんけどね。

document.createElement

イベントリスナーの話からやや脱線しますが、
要素とか、アクションに応じて増やしたい場合があると思います。
そんな時は、親を作る→要素を作る→子を作るってやるといいと思います。
順番は別に前後してもいいですけど、子は親作れないので注意してください。
コードで書くとこんな感じです。

var obj = document.getElementsByTagName("button");
obj.addEventListener("click",function(){main.init()}, true);

var main = {

     init : function() {

          var elem = document.createElement("div");
          elem.id = "namefield";//オブジェクト.idでＩＤがつきます！

          var elemchild = document.createElement("p");
          elemchild.innerHTML = "あぶらあげ";
          elem.appendChild(elemchild);
          //appenChildであぶらあげ  になりました。 

          var bodyObj = document.getElementsByTagName("body").item(0);
          bodyObj.appendChild(elem);//これでelemを展開します。                   

     }

}

document.getElementById

こういうのなんていうんだろ。
これとかdocument.getElementsByTagNameで
イベントターゲットを取得します。

例えばボタン押した時の指示書きたいなら

var obj = document.getElementsByTagName("button");
obj.addEventListener("click", buttonaction, true);
function buttonaction()
{
     alert("hoge-");
}

とかってやればいいです。

ただ、これをそのまま書くと、
指定する要素が出力されてからイベントリスナの登録が行われないので
指定する要素が書かれている後に書くか、windowにloadイベント登録して、
その中から指定要素に対して、イベント登録してください。