メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

javascript イベントリスナー

logo_jQuery

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

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

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

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

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

addEventListener

パラメータは3つ入ります。
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で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イベント登録して、
その中から指定要素に対して、イベント登録してください。

そのた

消したい時は消したいobj.remove
appendChildが駄目な時はinsertBefore
(jQueryでいうafterとかしたいとき)

とりあえずこれだけ覚えておけばなんとかなります。きっと。
もっと分かりやすく書きたいけど、かけないのは根本的な理解が足りないんだな。
くやしいです。

関連記事

コメントをお待ちしております