JavaScriptのイベント属性とは?

このQ&Aのポイント
  • JavaScriptには、イベント属性としてondblclickや、onkeydown等のイベント属性がありますが、その情報はどこで調べることができるのでしょうか。
  • W3CのDOM HTML内でイベント属性の情報を見つけることができなかったため、onclickやondblclick、onkeypressなどのイベント属性の情報を調べるためには、W3CのHP以外の方法を利用する必要があります。
  • JavaScriptのイベント属性については、W3CのHPではなく、他のリソースやドキュメントを参考にすることが推奨されています。具体的な情報の取得方法については、専門の書籍やオンラインのドキュメントを利用することが有益です。
回答を見る
  • ベストアンサー

javascript イベント属性

javascriptには、イベント属性としてondblclickや、onkeydown等があると思います。 W3CのDOM HTML(アドレス:http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html) 内で見つけることが出来ませんでした。 ⇒click、select、focusという用語は、見つけたのですが、メソッドなので違うと思っています。 onclick、ondblclick、onkeypress等のイベント属性の情報を調べるために、 W3CのHPを見るということ自体が間違っているのでしょうか? ※Eventのほうも見てみましたが、 http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-keyevents ⇒onclickではなく、clickだったので分からなくなっています。 javascriptには、イベント属性としてondblclickや、onkeydown等のイベント属性に対する情報は どこで調べることが出来るのでしょうか。 ご教授お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.1

HTML の on* 属性を見るなら、HTML4, HTML Standard (HTML5) 等の仕様書を読んでみてください。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/scripts.html#htmlrefs http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects # 最終的には DOM L2 Events や DOM L3 Events に行き着くので調べる箇所が間違っていたわけではないと思います。

kureakai
質問者

お礼

# 最終的には DOM L2 Events や DOM L3 Events に行き着くので調べる箇所が間違っていたわけではないと思います。 間違いではなかったのですね。 安心しました。 そして、アドレスありがとうございます。 探していたものそのものでした。 情報ありがとうございました。

その他の回答 (3)

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.4

To: No.3 > oncopy、onpaste 2006 年に Clipboard API として W3C 草案が出ていますよ。Drag and Drop(ondragstart その他)との兼ね合いもあって、当時の実装(IE5+ を含む)を整理した表もあったように記憶していましたが、今確認したらありませんね。どこだっただろう。 キーイベントについては長大な実装対照表も作ってました。WHATWG のメンバーが関わっているのもありますが、ブラウザ関連の仕様は後方互換性に相当気を遣っていますよ。『仕様同士で矛盾している』ではなく、それぞれの仕様に書かれているはずの「適合基準」てのを確認して下さい。それぞれの仕様には目的があるのですから。 ブラウザは『古い仕様』をサポートし続けねばなりませんので、『古い仕様のもとで作られたサイト』も長い期間使えるはずです。Web では何よりも互換性と相互運用性が至上命題ですので。にもかかわらず、『今まで動いていたプログラムが、最新ブラウザで動かなくなる』のは、どちらかと言えばプログラム側の原因が大きいです。

kureakai
質問者

お礼

情報ありがとうございます。 >キーイベントについては長大な実装対照表も作ってました。WHATWG のメンバーが関わっているのもありますが、ブラウザ関連の仕様は後方互換性に相当気を遣っていますよ。 そうなのですね。 色々調べてみます。

回答No.3

on~の規定はここです。 http://www.w3.org/TR/html401/index/attributes.html それを引き継いで(追加して)、ここに一覧があります。(下にスクロールしてください) http://www.w3.org/TR/html5/webappapis.html#event-handlers >onclick、ondblclick、onkeypress等のイベント属性の情報を調べるために、 >W3CのHPを見るということ自体が間違っているのでしょうか? 間違ってはいないと思います。 ただ、解説ではなく「仕様」ですから、非常に読みづらいと思います。 また、ブラウザ依存の属性などは書かれていません。 たとえばSafariにはoncopy、onpasteなどのイベントハンドラがありますが、W3C内にはどこにも書かれていません。 こういうのはブラウザベンダーのサイトの情報を見るしかないです。 (数日前の「JavaScriptのapiは、、、」というスレッドを見てください。) W3C内でも複雑奇怪を極めてますね。 たった一言で「JavaScript」でまとめていますが、その中には十種類以上の仕様が組み込まれていて、 仕様同士で矛盾している物も少なからずあります。 (ある仕様では「このキーワードはこの動作をする」となっていても、別の仕様では違う動作を規定している、 ある仕様では「この記述は必須」となっていても、別の仕様では不要、または非推奨となっているなど) 通常は「新しい方を採用する」というところですが、そこはウェブの世界、古い仕様のもとで作られたサイト(新しい仕様が作られる前に作られたサイト)では、古い仕様の通りに動かないときっちり動きません。 そこで、今まで動いていたプログラムが、最新ブラウザで動かなくなるという問題になるわけですが、 これが、IE6やFirefox3.6が未だに5%以上の利用率がある理由です。

kureakai
質問者

お礼

情報ありがとうございます。 >on~の規定はここです。 http://www.w3.org/TR/html401/index/attributes.html それを引き継いで(追加して)、ここに一覧があります。(下にスクロールしてください) http://www.w3.org/TR/html5/webappapis.html#event-handlers アドレスありがとうございます。 早速見ていることにします。 大変助かりました。

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.2

つまり、非公式だということでしょう ;-) ……なんて。 そもそも、NN2-4 まで、イベントプロパティを持つのは window、document、リンク要素およびフォーム要素に限られていました。全要素にイベントプロパティを持たせたのは IE3 です。 複数のイベントハンドラを登録できる attachEvent() が IE5 でサポート、DOM2 Events の addEventListener() が NN6 でサポート。この時点で、まだギリギリ 20 世紀です。新規のスクリプトはこちらの仕組みに移行させれば、古いイベントプロパティについては標準化しないまま(古いコードのために)残しても、特に影響ないはず……。 それから今に至るまで、未だにイベントプロパティが使われ続けてるのが、どちらかと言えば異常事態なのです。 まあ、そうも言ってられないので、HTML(旧 HTML5)規定がイベントプロパティの標準化に着手しました。この際、それまで標準化されていなかった window などのレガシーオブジェクトも公式に定義されることになりました。つまり、「現在までに存在するもの」を一通り整理する、という方向に舵が切られたわけです。それに伴い、現在では XMLHttpRequest や Web Worker などにもイベントプロパティが生やされるようになりました。 なお、ここでは意図的に HTML のイベント属性と、いわゆる DOM Level 0 のイベントプロパティを言い分けています。私は、イベントプロパティは使うべきでないが、イベント属性の方は場合によって使った方が良いと考えています。少なくとも、addEventListener() よりもイベント属性の方が「マシ」な場面がいくつかあります。

kureakai
質問者

お礼

色々歴史があるのですね・・・。 >それから今に至るまで、未だにイベントプロパティが使われ続けてるのが、どちらかと言えば異常事態なのです。 ご意見ありがとうございます。 覚えておきたいと思います。 情報ありがとうございましたた。

関連するQ&A

  • javascriptの実行の順番

    下記サイトには https://w3g.jp/xhtml/dic/onkeydown 「onkeydown属性, onkeypress属性, onkeyup属性を同一の要素に併せて使用した場合、イベントは onkeydown→onkeypress→onkeyup の順に発生します。」 とありましたので下記サンプルを作成して「a」と入力したところonkeydown, onkeypressは 実行されましたがonkeyupだけ実行されませんでした。onkeyup単独だけなら実行できたのですが なぜonkeyupは実行されないのでしょうか。 【サンプル】 <html> <head> <script> function down() { alert("down"); } function up() { alert("up"); } function press() { alert("press"); } </script> </head> <body>   <input type="text" onkeydown="down();" onkeypress="press();" onkeyup="up();"> </body> </html>

  • JavaScriptについて

    JavaScriptの質問です。 今、学校の課題でWebページを作っていて、 「Back」ってボタンを押すと前のページに戻るようにしたいのですが、 <FORM> <INPUT type="submit" value="BACK" onclick="history.back();">  </FORM> として、学校の評価に用いられるHTMLlintで文法のチェックをしたところ <FORM> には ACTION 属性が必要です ONCLICK 属性を使うときは ONKEYPRESS 属性も指定しましょう。 と警告が出てきました。 action属性とは具体的に何を指定すればいいのでしょうか。 また、onKeyPress属性は何をつければいいですか? お願いします。

  • テーブル行追加時にJavaScriptのイベントをセットするには?

    JavaScriptを使ってテーブルに行を追加しています。 その時、TRタグの中にJavaScriptのイベントハンドラ(onClickやonMouseOverなど)をセットしたいのですが、方法がわかりません。 TRタグのalignやheightのような属性は、setAttributeを利用して設定できているのですが・・・。 よろしくお願いします。

  • HTML:Tableタグに対し、JavaScriptで動的にイベントを

    HTML:Tableタグに対し、JavaScriptで動的にイベントを追加しようとしています。 onclick / ondblclickイベントを目的のTableに対しattachEventすると、ダブルクリックの 際に、onclickイベントまで発動してしまいます。 ダブルクリックしたときは、ondblclickのみ実行されるようにするにはどうしたらよいでしょうか。 例) <script type="text/javascript"> function click01() {...} function dblclick01() {...} table01.attachEvent("onclick",click01) table01.attachEvent("ondblclick",dblclick01) </script> (略) <table id="table01"> ...

  • javascript 画像をクリックするとイベントを発生させたいのです

    javascript 画像をクリックするとイベントを発生させたいのですがエラーが出てしまいます。 画像をクリックするとalertが表示されるコードを作成したつもりなのですが、 クリックしたときに、IEの左下に"ページでエラーが発生しました"というエラーが出てしまいます。 本などを読んで組み合わせて作成したコードなのですが、 構文間違いがあるのだと思うのですが、自分ではどこが違うのか分からず困っています。 もし、どこが間違っているか気付かれた方がいましたらご指摘願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <script type="text.javascript"> <!-- function clickhoge(){ alert("クリックしました!"); } --> </script> <body> <div> <img id="hoge" src="hoge.png" style="left:0px; top;0px;" onClick="clickhoge();" > </div> </body> </html>

  • Yahoo! UI LibraryのDataTable変換で指定したイベント属性が消える

    Yahoo! UI LibraryのDataTableを使ってウェブページを実装しています。 HTMLのtableタグ内のあるtd要素に onclick属性を指定してJavaScriptで仕掛けを組んでいますが Yahoo! UIのDataTableに変換すると、このイベント属性が無効になってしまいます。 テーブルの変換が行われるタイミングで 独自に指定した属性はなかったことになってしまうのでしょうか。 最終的にやりたいことは、テーブルの行をクリックしたら そこに設定されているデータをpostして次画面に遷移する、ということなんですが 実際のページはApache Wicketを使って実装しているので、 Wicket側で実装したonclickメソッド内でデータを取得したいと思っています。 Yahoo! UIから提供されているDOM操作メソッドを使って クリックイベントを拾えば、何とかやりたいことができそうな気がするのですが それ以外に何か方法があれば伝授してもらえないでしょうか。 以下にサンプルソースを載せます。 よろしくお願いします。 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/datatable/assets/skins/sam/datatable.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/json/json-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/get/get-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datatable/datatable-min.js"></script> </head> <body class="yui-skin-sam"> <div id="myMarkedUpContainer"> <table id="myTable"> <thead> <tr> <th>AAA</th> <th>BBB</th> <th>CCC</th> </tr> </thead> <tbody> <tr> <td onclick="window.alert();">1</td>  ←★このonclickが消えてしまう <td>bbb</td> <td>ccc</td> </tr> <tr> <td>2</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>3</td> <td>bbb</td> <td>ccc</td> </tr> </tbody> </table> </div> <script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() { var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myTable")); myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE; myDataSource.responseSchema = { fields: [{ key: "AAA", parser: "number" }, { key: "BBB" }, { key: "CCC" }] }; var myColumnDefs = [{ key: "AAA" }, { key: "BBB" }, { key: "CCC" }]; var myDataTable = new YAHOO.widget.DataTable("myMarkedUpContainer", myColumnDefs, myDataSource); }); }); </script> </body> </html> --------------------------------------------------

  • JavaScriptの仕様(ECMA-262以外)

    JavaScriptの仕様について教えてください ■質問1 … 仕様の種類 ・JavaScriptの仕様は、以下3つから成立しているという認識で合っているでしょうか? 1.ECMA-262 2.DOM 3.各ブラウザ実装状況 ■質問2 … ナビゲーターオブジェクト仕様 ・ナビゲーターオブジェクトの仕様はどこにあるのでしょうか? ・ナビゲーターオブジェクト=ブラウザ? ・ナビゲーターオブジェクトは、DOMの一種? ■質問3 … 「W3C」「WHATWG」の違い ・DOM仕様はどこが定めているのでしょうか? W3C? ・HTMLはDOMの一種? ・MOZILLAで「HTML 仕様書での定義」をクリックすると、下記ページへ飛ぶのですが、このページは何ですか? ▽HTML Standard   http://www.whatwg.org/specs/web-apps/current-work/multipage/ ・ベース仕様を「W3C」が決めて、もう少し詳細を「WHATWG」が決めて、その上層のHTML5部分はまたどっか違う組織が仕様を定義している、という話なのでしょうか?

  • onclickとonkeypressの重複

    W3Cのアクセシビリティ指針によれば、onclick属性を指定するならonkeypress属性も指定せよ、とのことですが、たとえば<input type="button">にこの両方を指定すると、IEなどの場合、このボタンにフォーカスがある状態でスペースキーを押すと、onkeypressイベント→onclickイベントというように両方とも発生してしまいます。 本来、ポインティングデバイスの代替の操作のためであるにもかかわらず、これでは逆にアクセシビリティは低下するばかりでなく、処理によっては2回行って欲しくない場合もあり、なんとも面倒です。 考えられる対策としては、たとえば、ほとんどのブラウザではキーでもonclickが起きるようになっているため、あえてonkeypressのほうはダミーを指定しておく、などでしょうか。 これに対してのお考えや、対策など御教授いただけたらと思います。 よろしくお願いいたします。

  • 外部JavaScriptのエラー

    外部JavaScriptのファイルを開くときに、「'document'は宣言されていません」と表示されてしまいます。 どうしたら解決できるでしょうか。 JavaScriptに関しては初心者です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 適用されるページはこのように宣言していますが、ここに問題があるのでしょうか。 回答お願いします。

  • JavaScriptでダブルクリック

    JavaScriptで、onClickというイベントがありますが、ダブルクリック のイベントなんてあるのでしょうか? よろしくお願いします。