JavaScript アンカータグのイベント取得



0   名前: たろう : 2007/03/21(水) 17:44  ID:53wWPngf sub-bK
はじめまして。JavaScriptのアンカーイベント取得について質問します。
以下のようなソースがあります。
最終的にやりたいことは以下の<P>タグの値をJavaScriptで取得することです。
→【質問】リンククリック時にJavascriptでイベントオブジェクトを取得したいです。
<a href>はCSSでリンク装飾しているので必ず記入します。

よろしくお願い致します。
[Javascript部分]
-------------------------------------------------------------
1 function linkTest() {
2     // イベントオブジェクト取得
      // DOM APIでHTML<P>タグの値(XXXX)を取得
3     // 取得したタグの値でページ遷移
4 }
-------------------------------------------------------------

[HTML部分]
-------------------------------------------------------------
<html>
<body>
<a href="javascript:linkTest()">メニュー</a><P>xxxx</P>
</body>
</html>
-------------------------------------------------------------





1   名前: 某制作さん : 2007/03/21(水) 17:44  ID:TEA0l5q. sub-t1
個人的にお勧めは
<p>にidを指定して

document.getElementById("●●●").innerHTML

ですかね。
取得できる値は
alert(document.getElementById("●●●").innerHTML);
でチェックしてみて下さい。

何かありましたら・・・

2   名前: 匿名 : 2007/03/21(水) 17:44  ID:6fAvcTJO sub-kJ
タグに値なんて存在しない(あえて言うならタグ名くらいか)。値(ノード値)を持ちうるのは要素や属性。
# DOM を使うなら、データ層(要素、属性)とシリアル層(タグ)の区別は必須。


> よろしくお願い致します。

何をお願いされたものかイマイチ分からないので、とりあえず以下に DOM ツリー構造を示す。
# なお、>>0 は妥当な HTML ではないので、バリデータを通さずにパースしたものとする。また、簡便のため、改行文字によるテキストノードを考えない。

・DOM ノードは、重要な 3 つのプロパティ、すなわちノード型(nodeType)、ノード名(nodeName)、ノード値(nodeValue)を持つ。
・DOM ノードは、親父(parentNode)、子供(childNodes[n 番目])、兄者(previousSibling)、弟者(nextSibling)を持つ。
// 書式:nodeType (nodeName, nodeValue)

+ Document ('#document', null)
    |
    + Element ('HTML', null)
        |
        + Element ('BODY', null)
            |
            + Element ('A', null)
            |   |
            |   + Text ('#text', 'メニュー')
            |
            + Element ('P', null)
                |
                + Text ('#text', 'xxxx')

a 要素ノードから見て、p 要素ノードは nextSibling になる。p 要素ノードの childNodes[0] であるテキストノードの nodeValue を見れば、'xxxx' を取得できる。


> リンククリック時にJavascriptでイベントオブジェクトを取得したい

<a href="javascript:linkTest()"> ではイベントオブジェクトを取得できない(と言うか、何でわざわざ javascript: スキームを使う?)。レガシーな書き方だが、とりあえず
<a onclick="linkTest (event);">

に修正する。すると、
function linkTest (event) {
    var target = event.target || event.srcElement;  // DOM2 Events || IE Event Model
}

で、イベントの発生源、すなわち a 要素ノードを取得できる。そして、target.nextSibling が p 要素ノード。

3   名前: たろう : 2007/03/21(水) 17:44  ID:07d61f7K sub-t1
>某制作さん

ありがとうございます。
<P>にidを指定してやる方法なのですが、
DBからメニューリンクの属性をサーブレットで取得する為、
仮にIDを指定しても、リンククリック時のイベントを判断できないのです。
→document.getElementByIdで指定するIDがわからないです。

回答ありがとうございます。感謝しております。

>匿名さん

確かに私の記述では何をやりたいかわかりませんね。申し訳ございません。
一応DOMで一通りのAPIは動かして確認してあります。
しかし、私の日本語記述(重要)がおかしいです。再度理解し、言葉の定義には注意します。

-------------------------------------------------------------------------------------------------------
<a href="javascript:linkTest()"> ではイベントオブジェクトを取得できない(と言うか、何でわざわざ javascript: スキームを使う?)。
-------------------------------------------------------------------------------------------------------
上記の部分に対する回答ですが、以下のようにやる理由は
<a>タグでリンクをCSSで装飾しているからです。
いろいろ試しましたが、結局
「<a href=」という記述でリンクが装飾されると認識してます。(未訪問、訪問済など)
「<a onclick=""」だとhrefの記述がないため、リンクが装飾されないと認識しております。
<a href="javascript:linkTest()"> 
→リンクが装飾されない。


上記をやりたいこととしてまとめます。
(1) <a href= の記述はCSSリンク装飾しているので記述したい。
(2) ページ遷移(リクエスト)はJavaScriptで実装したい)
(3) (1)(2)の条件含み、イベントオブジェクトからDOM APIでノード名「P」のノード値「××××」を取得したい。

※匿名さんの指摘より「<a href="javascript:linkTest()"> ではイベントオブジェクトを取得できない」という回答ですので、やり方自体変える必要があると思っています。


(1)(2)(3)を満たす実装を思いかないのが現状です。


4   名前: 匿名 : 2007/03/21(水) 17:44  ID:6fAvcTJO sub-kJ
> 「<a onclick=""」だとhrefの記述がないため、リンクが装飾されないと認識しております。

それは IE の実装がタコだから。まあ、IE に限った話ではないのだけど。

で、href 属性の必要性に関しては >>0 に説明があったので理解している。だが、IE Event Model 以外では、javascript: スキームによるコードからイベントオブジェクトを取得することはできない。

# と言うか、javascript: スキーム自体、昔から散々問題を指摘されているはず。何で素直に組み込みイベントを使わないのか、不思議に思ったんだ。

DOM2 Events では、イベントオブジェクトはイベントハンドラの引数として渡されることになっている。だから、組み込みイベントを使って
<a href="#" onclick="linkTest (event); ">

と書けば良い。この event は、Firefox、Opera、Safari では無名関数に引数として渡されたイベントオブジェクトであり[*]、IE では window.event を参照する。
[*] onclick="alert (arguments.callee); " してみれば分かる。

# だが、href="#" と書かねばならないということは、そもそも構造的に a 要素が不要であることを意味する。


> (1)(2)(3)を満たす実装を思いかないのが現状です。

とりあえず、必要なことは >>2 に全部書いた。


----
あと、細かいことだが、p 要素ノードのノード値は null。p 要素の内容、もしくは p 要素ノード下のテキストノードのノード値が「xxxx」。

# 要素・タグ・内容は HTML の基本用語。テキストノードの存在を理解できれば、DOM ツリー操作は自由自在。


----
なお、補足事項として、JavaScript 1.3 以前のイベントモデルに従えば、
<a href="#" onclick="this; ">

のように、イベントハンドラ内の this は要素自身(つまり a 要素ノード)を指す。手軽にクロスブラウザを実現したければ、これを使っても良い。

5   名前: 匿名 : 2007/03/21(水) 17:44  ID:6fAvcTJO sub-kJ
ごめん、話を広げ過ぎたので整理する。
<a href="#">メニュー</a><p>何か</p>

というデータ構造があり(ただし、a 要素と p 要素の間に空白文字を含めないものとする)、a 要素で click イベントが発生した場合に、p 要素の内容を取得したい場合、

JavaScript 1.3 + DOM1(IE、Firefox、Opera、Safari):
<a href="#" onclick="
      var data = this.nextSibling.firstChild.data;
  ">メニュー</a><p>何か</p>

DOM2(Firefox、Opera、Safari):
<a href="#" onclick="
      var data = event.target.nextSibling.firstChild.data;
  ">メニュー</a><p>何か</p>

DOM3(Firefox)
<a href="#" onclick="
      var data = event.target.nextSibling.textContent;
  ">メニュー</a><p>何か</p>

IE Event Model(IE、Opera、Safari):
<a href="#" onclick="
      var data = window.event.srcElement.nextSibling.innerText;
  ">メニュー</a><p>何か</p>

6   名前: たろう : 2007/03/21(水) 17:44  ID:07d61f7K sub-t1
>匿名さん

本当にありがとうございます。
以下のように記述し、onclickイベント先で実装します。
<a href="#" onclick="">

メニューの構成が1画面になるので、ステータスバーに<a href ="#" の"#"にあたるURL(現在のページの先頭を表す)パラメータが表示されます。(画面構成としてメニューが常に左部分に表示する仕様です。)よってメニューリンク押下後はステータスバーに現在のページのパラメータを含むURLが表示されます。これはJavaScriptの設定で回避します。

※クロスサイトスプクリプティング対策はブラウザしばり(IE6.0)を要件で出しているので、IE6.0として考えています。(しかし勉強になりました!)

一覧へ戻る