メシのタネ

めしのたねになるIT情報配信サイト


javascript イベントリスナー

,

  1. Webプログラム
  2. javascript
  3. 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とかしたいとき)

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

Laravel
Laravel Eloquent sync 系メソッド完全攻略 — 安全な同期のための 5 大リスクと回避策New!!
Laravel
belongsToMany 実戦ガイド ── “withPivot”で追加カラムを守る 中間テーブル設計チェックリストNew!!
PHP
魔王と行く! / Interface / Polymorphism / Ontology 深淵ガイドNew!!
Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみた
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体