FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

DOMを使ってイベント処理

昨日の日記に書いたとおり、自分用に書いたチートシートをスッキリと見やすくするJavaScriptを作った。

チートシートを以下のようなHTMLにして書き直した。
項目の横に下矢印アイコンをつける。
項目の詳細を<div>タグで囲む。
この下矢印アイコンをクリックすることで、詳細の表示/非表示を切り替えられるようにした。

実装の概要は以下のとおり
<img>タグにイベントリスナをセット
イベントが発生したら、リスナから渡されたイベントから.currentTargetで発生元要素取得
.parentNode経由で.getElementsByTagName("div")により表示切替<div>要素取得
.classNameを判定し、表示用クラスなら非表示用クラスに、非表示用クラスなら表示用クラスに変更
思ったよりも短いスクリプトで実装することができた。
ただ、イベント発生元の取得方法が、W3C準拠ではないIEでは違うところで手こずった。

とりあえずIEでも動くものができたが、色々と調べたいことが残った。
・currentTargetとsrcElementの違いがよくわかっていない。
・イベントリスナ登録に無名関数を使用する場合のメモリ消費問題
・無名関数使用とIE循環参照の関係
・無名関数とクロージャの関係。そもそもクロージャって何?
明日ここらへんをきっちりと調べよう。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。