javascriptイベントを文書化します。 JavaScript-イベントの種類。イベントを正しい要素に添付します

イベントのトピックは非常に重要で非常に興味深いものです。彼女のおかげで、ユーザーが喜ぶたくさんの面白いことができます。 JavaScriptイベントユーザーまたはブラウザーのいずれかによってトリガーされる特定のアクションです。たとえば、イベントには、ボタンのマウスクリック、マウスの移動、要素へのフォーカス、テキストフィールドの値の変更、ブラウザウィンドウのサイズの変更などがあります。

私は（少なくとも私が知っている）すべてのイベントを含むテーブルを用意しました JavaScript..。その中には、最初に、イベントの名前、このイベントを生成できる要素、およびイベント自体の説明があります。 JavaScriptイベント.

イベント	オブジェクト	発生原因
アボート	画像	画像の読み込みを中断する
ぼかし		要素の焦点の喪失
変化する	FileUpload、Select、Text、Textarea	価値の変化
クリック	エリア、ボタン、チェックボックス、ドキュメント、リンク、ラジオ、リセット、送信	要素をマウスでクリック
DblClick	エリア、ドキュメント、リンク	要素をダブルクリックします
ドラッグドロップ	窓	ブラウザウィンドウに移動します
集中	ボタン、チェックボックス、ファイルアップロード、フレーム、レイヤー、パスワード、ラジオ、リセット、選択、送信、テキスト、テキストエリア、ウィンドウ	要素にフォーカスを設定する
キーダウン		キーボードのキーを押す
KeyPress	ドキュメント、画像、リンク、テキストエリア	キーボードのキーを押したまま
KeyUp	ドキュメント、画像、リンク、テキストエリア	キーボードのキーを離す
ロード	ドキュメント、画像、レイヤー、ウィンドウ
MouseDown	ボタン、ドキュメント、リンク	マウスボタンが押されました
MouseMove	窓	動いているマウス
MouseOut	エリア、レイヤー、リンク	マウスが要素の範囲外です
マウスオーバー	エリア、レイヤー、リンク	マウスが要素の上にあります
MouseUp	ボタン、ドキュメント、リンク	マウスボタンを離しました
動く	フレーム	アイテムの移動
リセット	形	フォームをリセットする
サイズ変更	フレーム、窓	サイズ変更
選択する	テキスト、Textarea	テキストの選択
送信	形	データ転送
アンロード	窓	現在のページをアンロードしています

それでは、その方法を理解しましょう JavaScriptでイベントを使用する..。いわゆるがあります イベントハンドラー. イベントハンドラー特定のイベントが発生したときに何が起こるかを決定するだけです。 JavaScriptイベントハンドラー次の一般的な形式があります。

OnNameEvents

つまり、最初に接頭辞「オン"、次は何ですか イベント名、例えば、そのような イベントハンドラー: onFocus, onClick, onSubmit NS。ここでは質問はなかったと思います。そして今、主な質問： " JavaScriptでイベントを使用するにはどうすればよいですか？"。それらのアプリケーションの領域は広大であり、ここで1つの問題を検討します。ページには3つのリンクがあります。各リンクは、異なる背景色（たとえば、白、黄、緑）を担当します。）最初は背景が白です。特定のリンクにマウスを合わせると背景色が変わります。マウスにカーソルを合わせると背景色がデフォルトに戻ります。リンクをクリックしても背景色が保持されます。デフォルトとして。

白い
 黄
 緑

このスクリプト、またはむしろ全体を扱いましょう HTMLページサポート付き JavaScriptと CSS（言い換えれば、これは例です DHTML）。通常のものが最初に来る HTMLタグ、それで始まります HTMLページ..。次に、このページのすべてのリンクに下線が引かれた青色で、それらのリンク上のマウスポインタが「ポインタ」の形式である必要があるスタイルを作成します。「なぜスタイルを設定する必要があるのですか？結局のところ、リンクはとにかくまったく同じになります」と言うかもしれません。そうです、リンクですが、そのようなリンクはありません（結局のところ、属性はありません hrefタグ内）、デフォルトではプレーンな黒のテキストになります（ただし、テキストをクリックすることもできます）。したがって、スタイルは必須です。あなたはそれを削除して何が起こるかを見ることができます。さらに良いことに、置く href属性（任意の値、空であっても）スクリプトが機能しなくなった理由を説明します。さらにそれはすでに始まっています JavaScript..。変数を作成します default_colorこれはデフォルトの色を担当します。次に、3つの機能があります。

関数 setTempColor（）一時的な色の変更を担当します。

関数 setDefaultColor（）デフォルトの色を変更する責任があります。

関数 defaultColor（）デフォルトの背景色を設定します。

次に、フォームに属性を持つリンクがあります イベントハンドラー..。リンクの上にマウスを置くと、 MouseOverイベント、それぞれ、 onMouseOverイベントハンドラー関数を呼び出します setTempColor（）対応するパラメータを渡します。要素からマウスを削除すると、 MouseOutイベント、そして呼び出されます defaultColor（）関数、これにより背景色がデフォルトになります。そして最後に、リンクをクリックすると（ onClickハンドラー）関数が呼び出されます setDefaultColor（）、パラメータで指定された色をデフォルトの背景色に設定します。ご覧のとおり、すべてが非常に単純です。

そうだった JavaScriptでイベントを使用する原則、そしてすべてはあなたの想像力にのみ依存します！

ダイナミックHTMLページを作成するJavaScriptの機能は、3つの柱に基づいています。それらのうちの2つは、以前の記事ですでに取り上げられています。そして3つ目はイベントです。

ブラウザウィンドウ管理-ウィンドウオブジェクトを使用します。
ウィンドウ内のオブジェクトの管理はDOMです。
イベントでjavaScriptコードを実行します。

イベント-ユーザーのアクションに対するコンピューターの反応。たとえば、Tを使用します。 javaScriptイベントは、キーボードボタンの押下、マウスの移動とクリック、およびブラウザウィンドウの終了と見なされます。 tのあるすべてのイベント。 javaScriptは、ドキュメントオブジェクトとブラウザオブジェクトによって生成されます（「ユーザー」の概念はありません）。たとえば、段落をクリックすると、マウスクリックイベントがオブジェクト（段落）によって生成されます。

イベントに応答するJavaScriptコードを実行できるようにするには、このコードを特定のオブジェクトから生成されたイベントに関連付ける必要があります。特定のオブジェクトからの特定のイベントで。このアクションは呼ばれます- イベントサブスクリプション。

サブスクリプションとは、ブラウザオブジェクトモデルの特定のオブジェクトからの特定のイベントに関数をバインドすることを意味します。そして、このオブジェクトがこのイベントを作成（生成）すると、この関数は自動的に起動します。

onclick-マウスボタンをクリックします。
ondblclick-マウスボタンをダブルクリックします。
onmousedown-マウスボタンが押されます（下）。
onmousemove-マウスがオブジェクト上を移動します（多くのイベントが発生し、1px = 1イベントによるマウスの移動）。
onmouseout-マウスがオブジェクトから離れます。
onmouseover-マウスが目的のオブジェクト上を移動します。
onmouseup-マウスボタンが離されます（上げられます）。
onkeydown-キーボードボタンが押された（下）。
onkeypress-キーボードボタンを押します。
onkeyup-キーボードボタンが離されます（上げられます）。
onblur-入力フォーカスの喪失（カーソルの点滅）。
onfocus-この要素が入力フォーカスを受け取る瞬間。
onchange-テキストが変更された場合（たとえば、テキストボックス内）、フォーカスを失った後にコントロールによって生成されます。例外は「選択」リスト項目で、このイベントはフォーカスが失われた後ではなく、すぐに生成されます。
onload-ページのウィンドウへの読み込みが完了したときに生成されます。通常、ページが完全に読み込まれた後にjavaScriptコードを実行する必要がある場合に使用されます。
onunload-ドキュメントがウィンドウからアンロードされる前に発生します（つまり、このドキュメントを閉じるか、別のドキュメントに切り替えたとき）。
onreset-フォームがリセットされました。
onsubmit-データフォームが送信されました。

イベントへのサブスクリプション

javaScriptを介したサブスクリプション。この方法はほとんどの場合に使用されます。まず、たとえばgetElementByIdメソッド（必要な要素のIDを指定）を使用して、イベントをサブスクライブする要素のオブジェクトを見つける必要があります。

関数myFunc（）（ //単純な関数を作成しましたアラート（ "こんにちは"）; ）function pageInit（）（var p =document。getElementById（ "1"）;p。onclick= myFunc;） //イベントをトリガーする関数を呼び出しました窓。 onload = pageInit; //ページが読み込まれるとイベントが発生します < p id= 1 >段落1 //段落のIDを設定します

HTMLコードによるサブスクリプション。このメソッドの欠点は、htmlコードがjavaScriptコードで乱雑になることです。さらに、いくつかの制限があり、複雑なケースでは使用するのが不便です。

< script type= "text/javascript" >関数myFunc（）（ //単純な関数を作成しましたアラート（ "こんにちは"）; ） < p onclick= "myFunc()" >パラグラフ2 //関数を呼び出しました

イベント処理モデル

要素に対してイベントが発生すると、ページの最上部まで（ドキュメントのメイン領域であるため、「本体」まで）のすべての親要素に対しても同様のイベントが発生するはずです。したがって、ページで発生するイベントはすべて本文で発生します。

次に、そのようなイベントがどのような順序で発生するのかという疑問が生じます。最近のブラウザでは、イベント処理モデルはバブルバブルモデルと呼ばれています。その本質：最初に、クリックされた要素に対してイベントが発生し、次にその親に対して、というように最上部まで、つまり「本体」に対してイベントが発生します。

要素->要素2->ドキュメント->ウィンドウ

イベントパラメータ（イベントオブジェクト）

そのようなオブジェクトがあります イベント多くの特性があります。これらのプロパティを読むことで、イベントに関する情報を取得できます。情報を取得するには、最初にオブジェクト自体を取得する必要があります。

メイン プロパティこのオブジェクトの：

x、y-イベント時のマウスの座標。
clientX、clientYは同じです。
offsetX、offsetY-同じですが、これは親要素に対するマウスのオフセットです。
screenX、screenY-画面座標。
button-どのマウスボタンが押されたか（0-押されていない、1-左ボタンが押されている、2-右ボタンが押されている、4-中央ボタンが押されている）。
keyCode押されたキーボードキーの数値コード。
srcElement-イベントを発生させた要素。
fromElement-マウスが移動した要素。
toElement-マウスがオーバーしたオブジェクトを示します。
cancelBubble-非標準の方法です。値をtrueに指定すると、「ポップアップバブル」がキャンセルされます。または、ユーザーが押したキーのコードを変更できます。

著者から： Webページが完全に読み込まれ、準備が整うと、JavaScriptでイベントのカスケード全体がトリガーされます。これは、ユーザーが何らかの方法でページを操作し始めるとさらに大きくなります。イベントには、ページの読み込み、下へのスクロール、ボタンのクリック、さらにはフォームへの入力が含まれます。 JavaScriptでイベントをトリガーするには、自分で設計および作成する特別なコードが必要です。これにより、より深い相互作用が構築されます。

JSのイベントは、次の4つの大きなグループに分けることができます。

UIイベント：ユーザーがブラウザーUI（ブラウザーインターフェイスの一部であるWebページの周りのボタン）を操作したときに発生します。これらのイベントには、ページがユーザーとは無関係に実行するアクションを含めることもできます。これらのイベントには、ウィンドウのサイズ変更、ページのスクロール、コンテンツのロードとアンロードが含まれます。

キーボード、マウス、およびタッチスクリーンイベント：ユーザーがキーボードのボタンを押すか離すか、マウス、トラックパッドを制御するか、タッチスクリーンを使用すると発生します。

フォーカスとハンディキャップイベント。主にフォームに関連付けられています。ユーザーが入力フィールドを操作する準備ができると、入力フィールドは「フォーカスを受け取ります」。その他のイベントは、フォームの送信、フォームフィールド値の変更などを追跡します。

JavaScript。ファストスタート

突然変異イベントとオブザーバー。変更要素は、DOM構造が変更されたときに追跡されます。たとえば、ページ上の要素がスクリプトによって挿入または削除されたときです。

イベントハンドラーのバインド

特定のDOM要素に対してのみ起動するカスタムコードは、イベントハンドラーを作成します。 JSでイベントハンドラーを作成するには、次の3つの方法があります。

1.属性を介した標準のHTMLイベントハンドラー

イベントをバインドする最も古い方法で、これまでで最も使用されている方法の1つです。このメソッドは、マークアップで特別な属性を使用します。例えば：

< input type = "text" id = "username" onblur = "checkName()" >

上記の例では、フィールドがフォーカスを受け取り、ユーザーが次のフィールドへの入力に進んだ後（たとえば、TABまたは通常のクリックを使用）、要素はJSで記述されたcheckName関数を呼び出します。
標準のHTMLイベントハンドラーは、主に機能がマークアップと混合されているため、コードの操作とデバッグが困難であるため、最新の開発での使用は推奨されていません。

2.DOMの標準イベントハンドラー

この手法はJSとマークアップを分離しますが、同じ制限があります。イベントに割り当てることができる関数は1つだけです。 DOMのイベントハンドラーに相当するHTMLは次のようになります。

var username = document.getElementbyId（ "username"）; username.onblur = checkName;

ユーザー名。 onblur = checkName;

JavaScript。ファストスタート

Webアプリケーションを構築する実践的な例を使用して、JavaScriptの基本を学びます

前の例のように、checkName関数は、form要素がフォーカスを失った後に実行されます。

3.イベントリスナー

イベントハンドラーを追加するための最新の方法で、複数のイベントと関数をチェーンできます。

var username = document.getElementbyId（ "username"）; username.addEventListener（ "blur"、checkName、false）;

var username = document。 getElementbyId（ "ユーザー名"）;

ユーザー名。 addEventListener（ "blur"、checkName、false）;

最後のブール値は、イベントをキャプチャするかどうかを示します。通常はfalseに設定されます。単純なスクリプトでは、イベントは無名関数として記述されることがよくあります。

var username = document.getElementbyId（ "username"）; username.addEventListener（ "blur"、function（）（//イベントをトリガーするアクション））

すべてのイベントが等しいわけではありません

すべてのイベントを同じ方法で処理できるわけではないことを理解することが重要です。スクロールイベントとサイズ変更イベントは非常に頻繁に発生するため、スクリプトのパフォーマンスが低下しないように注意する必要があります。一見無害に見える入力イベントについても同じことが言えます。範囲スライダーで頻繁にトリガーされる入力イベントに絶えず応答しようとすると、スクリプトのパフォーマンスが大幅に低下する可能性があります。

すべてのイベントが追跡されるわけではありません

ミューテーションウォッチャーは現在、ページ上のすべての要素に対するすべての変更を追跡することはできません。たとえば、要素の高さの変化を追跡する方法はありません（レスポンシブデザインでコンテナが縮小すると、コンテナ内のテキストが再配置され、要素が長くなります）。変更を追跡する方法はまだあります。これについては次の記事で説明します。

イベントを正しい要素に添付します

onclickイベントは、リンクを含む多くの要素に適用されます。一般的なルールがあります-リンクにJSコードを添付することはお勧めしません。リンクをクリックして、ユーザーはサイトの別の領域またはアンカーに移動する必要があります。同じページで何かを変更するために使用できるUI要素が必要な場合は、ボタンが適しています。ボタンにJavaScriptを問題なく掛けることができます。

CSSで実行できる場合は、JavaScriptを使用しないでください

CSSと比較すると、JavaScriptは遅く、信頼性がありません。基本的に、CSSは、可能な限り複雑なスクリプトの代わりに使用する必要があります。ただし、CSSがすべてを行うわけではありません。ホバー（多くの場合、タッチイベントを置き換えます）でうまく機能し、場合によってはクリックイベントをターゲットで置き換えることもできます。 CSSアニメーションは、ページが読み込まれた後に自動的にトリガーされます。ラジオボタンなどの要素に対してトリガーできる特別なCSS状態があります。ただし、通常、より複雑なものはJavaScriptに任せるのが最善です。

ページの操作中に、ユーザーはさまざまなアクションを実行します。マウスボタンをクリックし、キーボードにテキストを入力します。このような各アクションはブラウザイベントです。プログラムの特定の行で追跡および実行できます。 JavaScriptには、このためのイベントハンドラーがあります。ユーザーアクションに加えて、ページ全体の読み込みなどの他のブラウザイベントがあります。

各イベントには独自の名前があります。クリックはマウスの左ボタンの押下、キーダウンはキーの押下、フォーカスはフォーム要素のフォーカス、

イベント処理

イベントがトリガーされたときに実行される関数が呼び出されます イベントハンドラ..。イベントの種類ごとに独自のハンドラーがあります。ハンドラー名は、onという単語とイベントの名前で構成されます。たとえば、クリックイベントハンドラはonclickと呼ばれます。イベントは一般的にページでは発生しませんが、特定の要素で発生します。したがって、ハンドラーは別個の関数ではありません。ハンドラーはページのある要素に配置されます。

イベントハンドラーを要素に割り当てるには、さまざまな方法があります。 tag属性を介してハンドラーを割り当てることができます。イベントがトリガーされたときに実行されるコードは、属性値に書き込まれます。ページを作成し、それにボタンを追加して、クリックイベントハンドラーを割り当てましょう。

1
2
3
4
5
6
7

ページ

JavaScript：

17
18
19
20
21
22

var inform = function（）（alert（ "別のボタン"）;）; var mbutton = document.getElementById（ "mbutton"）; mbutton.onclick =通知;

関数がハンドラーに割り当てられている場合、関数名の後に括弧はありません。かっこを付けると、関数の割り当てではなく、実行の呼び出しになります。

要素にイベントハンドラーを割り当てるaddEventListener（）メソッドもあります。それはより現代的であると考えられています。現在はあまり使用されていませんが、JavaScriptには、このメソッドを使用してのみ処理できる新しいイベントがあります。

element.addEventListener（イベント、関数）

オプション：

イベント-処理する必要のあるイベント

関数-ハンドラーになる関数

このメソッドのパラメーターでは、イベントの名前は引用符で囲まれているため、その前に単語を書き込む必要はありません。

HTMLコード：

JavaScript：

24
25
26
27
28
29

var newinform = function（）（alert（ "新しいボタンが押されました"）;）; var newbutton = document.getElementById（ "newbutton"）; newbutton.addEventListener（ "クリック"、newinform）;

removeEventListener（）メソッドを使用すると、ハンドラーを削除できます。

element.removeEventListener（イベント、関数）

考慮されたメソッドを使用して、要素に同じイベントの複数のハンドラーを割り当てることができます。次に、それぞれを個別に削除する必要があります。

イベントオブジェクト

イベントがトリガーされるたびに、イベントオブジェクトが生成されます。オブジェクトには、イベントに関する情報が含まれています。イベントの種類が異なれば、オブジェクトも異なります。しかし、どのオブジェクトにもあるプロパティもあります。たとえば、typeプロパティには、イベントのタイプが含まれます。

イベントオブジェクトは、ハンドラーである関数にパラメーターとして渡されます。オブジェクトにアクセスするには、関数にパラメーターを作成する必要があります。このパラメーターは、オブジェクトを参照するために使用されます。関数が他のパラメーターも必要とする場合は、イベントオブジェクトを最初のパラメーターにする必要があります。 idが「button」に等しいボタンのハンドラーを変更してみましょう。イベントオブジェクトにアクセスしてみましょう。ボタンを押すことについてのメッセージの代わりに、イベントのタイプを表示します。これで、ハンドラーは次のようになります。

13
14
15
16

button.onclick = function（event）（alert（event.type）;）;

ボタンをクリックすると、トリガーされたイベントのタイプが表示されます。

すべてのイベントオブジェクトにはcurrentTargetプロパティがあります。イベントをトリガーした要素を返します。これは無意味に思えるかもしれません。結局のところ、ハンドラーは特定の要素に割り当てられます。なぜこの要素を再び返すのですか？しかし、ブラウザイベントでは、状況はもう少し複雑になります。これがどのように使用されるかについては、少し後で学習します。特定のイベントを研究する際には、他の特性を考慮します。

イベントタイプ

World Wide Webの開発の黎明期には、Web開発者は、「ロード」、「クリック」、「マウスオーバー」などの少数のイベントのみを処理する必要がありました。これらのかなり古いイベントタイプは、すべてのブラウザで十分にサポートされています。 Webプラットフォームが進化するにつれて、より強力なAPIが含まれ、イベントの数が大幅に増加しました。イベントの完全なセットを定義する標準はなく、サポートされるイベントの数は急速に増加し続けています。これらの新しいイベントは、次の2つのソースで識別されます。

DOMレベル3イベント仕様は、長年の停滞の後、W3Cコンソーシアムの後援の下で積極的に開発され始めました。

HTML5仕様（および関連する追加仕様）の新しいAPIの多くは、たとえば、履歴の管理、ドラッグアンドドロップ、ドキュメント間のメッセージ交換、オーディオとビデオの再生に使用される新しいイベントを定義します。

これらの新しいイベントタイプの多くはまだ広くサポートされておらず、まだ設計段階にある標準によって定義されていることに注意してください。 Webアプリケーションで最も頻繁に使用するイベントは、通常、長年のカテゴリに分類され、すべてのブラウザでサポートされます。これらは、マウス、キーボード、HTMLフォーム、およびWindowオブジェクトを操作するためのイベントです。これらのイベントを検討します。

ロードイベントを文書化する

ほとんどのWebアプリケーションでは、ドキュメントの読み込みが完了し、ドキュメントで操作を実行する準備ができたときに通知するWebブラウザが絶対に必要です。この目的はイベントによって提供されます ロード Windowオブジェクト内。ロードイベントは、ドキュメントとそのすべての画像が完全にロードされた後にのみ発生します。ただし、スクリプトは通常、ドキュメントが解析された直後、画像が読み込まれる前に実行できます。ロード以外のイベントでスクリプトを開始することにより、Webアプリケーションの起動時間を大幅に短縮できます。

イベント DOMContentLoadedドキュメントがロードされ、パーサーによって解析され、すべての遅延スクリプトが実行されるとすぐに発生します。この時点で、async属性を持つ画像とスクリプトは引き続き読み込まれる可能性がありますが、ドキュメント自体は操作を実行する準備ができています。このイベントはFirefoxで最初に導入され、その後Microsoftを含む他のすべてのブラウザメーカーに採用され、IE9でこのイベントのサポートが追加されました。名前にDOMプレフィックスが含まれているにもかかわらず、このイベントはDOMレベル3イベント標準の一部ではありませんが、HTML5仕様によって標準化されています。

ドキュメントが読み込まれると、document.readyStateプロパティの値が変更されます。 IEでこのプロパティの値を変更するたびに、Documentオブジェクトでreadystatechangeイベントが発生するため、IEではこのイベントを使用して、完全な状態がいつ発生するかを判断できます。 HTML5仕様はイベントを標準化します readystatechange、ただし、loadイベントの直前に起動するように指示するため、loadに対するreadystatechangeイベントの利点が完全に明確ではありません。

以下の例では、whenReady（）関数を定義しています。ドキュメントが操作を実行する準備ができるとすぐに、whenReady（）に渡される関数が（Documentオブジェクトのメソッドとして）呼び出されます。 whenReady（）は、DOMContentLoadedイベントとreadystatechangeイベントをリッスンし、最初の2つのイベントをサポートしない古いブラウザーで使用される場合のフォールバックとしてのみloadイベントを使用します。 whenReady（）関数は、次のシナリオの一部で使用されます。

/ *関数をwhenReady（）に渡すと、ドキュメントが解析されて操作を実行する準備ができるとすぐに、関数が（ドキュメントオブジェクトのメソッドとして）呼び出されます。登録された関数は、最初のDOMContentLoaded、readystatechange、またはloadイベントで呼び出されます。ドキュメントの準備ができてすべての関数が呼び出されると、whenReady（）はドキュメントに渡されたすべての関数をすぐに呼び出します。 * / var whenReady =（function（）（//この関数はwhenReady（）関数によって返されますvar funcs =; //イベントで呼び出される関数varready = false; //ハンドラー関数が呼び出されるとtrueになります/ /イベントハンドラー。ドキュメントが//操作を実行する準備ができるとすぐに呼び出されます。関数ハンドラー（e）（//ハンドラーがすでに呼び出されている場合は、コントロールを返します。if（ready）return; //このイベントがreadystatechangeであり、状態は// "complete"から優れています。つまり、ドキュメントはまだ準備ができていませんif（e.type === "readystatechange" && document.readyState！== "complete"）return; //登録済みのすべてを呼び出す関数。//呼び出された関数の1つが追加のfunctions.for（var i = 0; i）を登録する場合、//プロパティfuncs.lengthの各値が1回チェックされることに注意してください。

マウスイベント

マウスに関連するイベントはかなりあります。それらはすべて以下の表にリストされています。 mouseenterとmouseleaveを除くすべてのマウスイベントがバブルアップします。リンクのクリックイベントとフォーム送信ボタンには、元に戻すことができるデフォルトのアクションがあります。理論的には、コンテキストメニューイベントをキャンセルしてコンテキストメニューが表示されないようにすることは可能ですが、一部のブラウザには、このイベントをキャンセルできないようにする設定があります。

JavaScriptマウスイベント

の種類	説明
クリック	ユーザーがマウスボタンを押して放すか、要素をアクティブ化したときに発生する高レベルのイベント。
コンテキストメニュー	コンテキストメニューが表示される前に発生するキャンセル可能なイベント。現在のブラウザは右クリックでコンテキストメニューを表示するため、このイベントはクリックイベントとしても使用できます。
dblclick	ユーザーがダブルクリックすると発生します。
マウスダウン	ユーザーがマウスボタンを押すと発生します。
マウスアップ	ユーザーがマウスボタンを離したときに発生します。
mousemove	ユーザーがマウスポインタを動かすと発生します。
マウスオーバー	マウスポインタが要素の上にあるときに発生します。 relatedTarget（またはIEのfromElement）プロパティは、マウスポインタの移動元の要素を識別します。
マウスアウト	マウスポインタが要素を離れたときに発生します。 relatedTarget（またはIEのtoElement）プロパティは、マウスポインタの移動先の要素を指定します。
mouseenter	マウスオーバーに似ていますが、ポップアップしません。 IEで最初に登場し、HTML5で標準化されましたが、まだすべてのブラウザーでサポートされているわけではありません。
マウスリーブ	マウスアウトと同様ですが、ポップアップしません。 IEで最初に登場し、HTML5で標準化されましたが、まだすべてのブラウザーでサポートされているわけではありません。

マウスイベントハンドラに渡されるオブジェクトにはプロパティがあります clientXと clientYウィンドウを基準にしたポインタの座標を定義します。それらをドキュメント座標に変換するには、ウィンドウのスクロールバーの位置を追加する必要があります。

プロパティ altKey, ctrlKey, metaKeyと シフトキーイベント時に押されていた可能性のあるさまざまな修飾キーの状態を定義します。たとえば、単純なクリックとShiftキーを押したままのクリックを区別するために使用できます。

財産 ボタンイベント時にどのマウスボタンが押されていたかを判別します。ただし、ブラウザが異なればこのプロパティに異なる値が書き込まれるため、ポータブルな方法で使用することは困難です。

一部のブラウザでは、左ボタンがクリックされたときにのみクリックイベントが発生します。したがって、他のボタンのクリックを処理する必要がある場合は、mousedownイベントとmouseupイベントを使用する必要があります。コンテキストメニューイベントは通常、右クリックが実行されたことを通知しますが、上記のように、コンテキストメニューがこのイベントのハンドラーに表示されないようにすることが常に可能であるとは限りません。

以下の例は、mousedownイベントハンドラーから呼び出されたときに、ユーザーが絶対位置にあるドキュメント要素をマウスでドラッグできるようにするドラッグ（）関数を示しています。ドラッグ（）関数は、DOMとIEの両方のイベントモデルで機能します。

ドラッグ（）関数は2つの引数を取ります。 1つ目は、ドラッグされているアイテムです。これは、mousedownイベントを発生させた要素とそれを含む要素である可能性があります（たとえば、ユーザーがウィンドウタイトルのように見える要素を取得し、ウィンドウのように見える要素をドラッグできるようにすることができます）。ただし、いずれの場合も、CSSposition属性を使用して絶対的に配置されたドキュメント要素である必要があります。 2番目の引数は、mousedownイベントで受信したイベントオブジェクトです。

/ *ドラッグ（）-絶対位置にあるHTML要素をドラッグアンドドロップします。この関数は、onmousedownイベントハンドラーから呼び出す必要があります。後続のmousemoveイベントにより、指定された要素が移動します。 mouseupイベントは移動を完了します。この実装は、標準イベントモデルとIEイベントモデルの両方で機能します。 getScrollOffsets（）関数を使用します。引数elementToDrag：mousedownイベントを受信または含む要素。この要素は絶対に配置する必要があります。そのstyle.leftプロパティとstyle.topプロパティの値は、ユーザーがマウスポインタを動かすと変化します。 event：mousedownイベントハンドラーによって受信されたEventオブジェクト。 * / function drag（elementToDrag、event）（//マウスの開始座標をドキュメント座標に変換しますvar scroll = getScrollOffsets（）; //以下で宣言されたヘルパー関数varstartX = event.clientX + scroll.x; var startY = event。clientY+ scroll.y; //移動される要素の//初期座標（ドキュメントの先頭を基準）。elementToDragは絶対位置にあるため、//そのoffsetParentプロパティはドキュメントを参照していると見なされます。 body var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; //マウスダウンイベントポイントと要素の左上隅の間の距離を見つけます。//この距離はマウスポインタを移動するときに考慮されます。var deltaX = startX --origX; var deltaY = startY --origY; //ハンドラーのmousemoveおよびmouseupイベントを登録します// mousedown event.if（document.addEventListener）（//標準イベントモデル//登録しますドキュメント内のハンドラーをインターセプトしますdocument.addEventListener（ "mousemove"、moveHandler、true）; document.addEventListener（ "mouseup"、upHandler、true）; ）else if（document.attachEvent）（// IE5-8のIEイベントモデル// IEイベントモデルでは、//要素のsetCapture（）メソッドを呼び出すことでイベントがインターセプトされます。elementToDrag.setCapture（）; elementToDrag。 attachEvent（ "onmousemove"、moveHandler）; elementToDrag.attachEvent（ "onmouseup"、upHandler）; //マウスイベントキャプチャの損失をmouseupイベントとして解釈しますelementToDrag.attachEvent（ "onlosecapture"、upHandler）;）//このイベントは処理され、他のハンドラーに渡されるべきではありませんif（event .stopPropagation）event.stopPropagation（）; //標準モデルelseevent.cancelBubble = true; // IE //デフォルトのアクションが実行されないようにします。 if（event.preventDefault）event.preventDefault（）; //標準モデルelseevent.returnValue = false; // IE / *このハンドラーは、要素のドラッグ中に発生するmousemoveイベントをキャッチします。彼は要素を動かす責任があります。 * / function moveHandler（e）（if（！e）e = window.event; // IEイベントモデル//スクロールバーの位置と最初のclick.varスクロールに対するオフセットに基づいて//要素をマウスの位置に移動します= getScrollOffsets（）; elementToDrag.style.left =（e.clientX + scroll.x-deltaX）+ "px"; elementToDrag.style.top =（e.clientY + scroll.y-deltaY）+ "px"; / /そしてアボートはイベントをさらに伝播しますif（e.stopPropagation）e.stopPropagation（）; //標準モデルelsee.cancelBubble = true; // IE）/ *このハンドラーは、ドラッグ操作を完了する最後のマウスアップイベントをインターセプトします。 * / function upHandler（e）（if（！e）e = window.event; // IEイベントモデル//インターセプトイベントハンドラーを削除します。if（document.removeEventListener）（// DOMイベントモデルdocument.removeEventListener（ "mouseup" 、upHandler、true）; document.removeEventListener（ "mousemove"、moveHandler、true）;）else if（document.detachEvent）（// IE 5+イベントモデルelementToDrag.detachEvent（ "onlosecapture"、upHandler）; elementToDrag.detachEvent（ "onmouseup"、upHandler）; elementToDrag.detachEvent（ "onmousemove"、moveHandler）; elementToDrag.releaseCapture（）;）//そしてイベントのさらなる伝播を中断します。if（e.stopPropagation）e.stopPropagation（）; //標準model else e.cancelBubble = true; // IE））//現在のスクロールバーの位置をオブジェクト関数のxプロパティとyプロパティとして返しますgetScrollOffsets（w）（//指定されたウィンドウまたは現在のウィンドウを使用します。関数は引数なしで呼び出されますw = w | | window; //次のメソッドは、IEバージョン8を除くすべてのブラウザーで機能します以下if（w.pageXOffset！= null）return（x：w.pageXOffset、y：w.pageYOffset）; //標準モードのIE（およびその他のブラウザ）の場合var d = w.document; if（document.compatMode == "CSSICompat"）return（x：d.documentElement.scrollLeft、y：d.documentElement.scrollTop）; //互換モードのブラウザの場合return（x：d.body.scrollLeft、y：d.body.scrollTop）; ）

次のスニペットは、HTMLファイルでdrag（）関数を使用する方法を示しています。

私をドラッグしてください

これはテストです。チェック、チェック、チェック。

ここで最も重要なのは、ネストされた要素のonmousedown属性です。

..。 this.parentNodeプロパティを使用することに注意してください。これは、コンテナ要素全体が移動されることを意味します。

テキスト入力イベント

ブラウザは、3つの古いキーボード入力イベントをサポートしています。キーダウンイベントとキーアップイベントは低レベルのイベントであり、次のセクションで説明します。しかし、イベント キーを押す印刷可能な文字が入力されたことを示す高レベルのものです。

DOMレベル3イベントドラフト仕様は、より一般化されたイベントを定義します textinput入力方法に関係なく、テキスト入力に応答して生成されます。

提案されたtextinputイベントと現在実装されているtextInputイベントを使用して、入力されたテキストを格納するデータプロパティを持つ単純なイベントオブジェクトが渡されます。（別の提案されたプロパティinputMethodは、入力のソースを定義する必要がありますが、まだ実装されていません。）キーボード入力の場合、データプロパティには通常1文字が含まれますが、他のソースから入力すると、多くの文字が含まれる場合があります。。

keypressイベントでディスパッチされるイベントオブジェクトは、より複雑な構成になっています。 keypressイベントは、単一文字の入力を表します。この文字は、数値のUnicodeコードポイント値としてイベントオブジェクトに含まれているため、String.fromCharCode（）メソッドを使用して文字列に変換する必要があります。ほとんどのブラウザでは、入力された文字のコードポイントがプロパティに保存されます キーコードイベントオブジェクト。ただし、歴史的な理由から、Firefoxは代わりにプロパティを使用します charCode.

ほとんどのブラウザでは、キー押下イベントは、印刷可能な文字が入力された場合にのみ発生します。ただし、Firefoxでは、印刷できない文字に対してもkeypressイベントが発生します。 2つのケースを区別するために（そして印刷できない文字を無視するために）、イベントオブジェクトのcharCodeプロパティが存在し、値0が含まれているかどうかを確認できます。

textinput、textInput、およびkeypressイベントをキャンセルして、文字入力を防ぐことができます。つまり、これらのイベントを使用して入力をフィルタリングできます。たとえば、数字入力フィールドに英字が入力されないようにすることができます。

以下の例は、この種のフィルタリングを実装するJavaScriptモジュールを示しています。彼はアイテムを検索します追加の（非標準）属性data-allowed-charsを使用します。見つかったすべての要素のtextinput、textInput、およびkeypressイベントハンドラーを登録し、入力をdata-allowed-chars属性で指定された正規表現文字に制限します。

/ *アイテムの入力をフィルタリングしますこのモジュールはすべての要素を検索します「data-allowed-chars」属性を持つドキュメント内。これらの要素のkeypress、textinput、およびtextInputイベントハンドラーを登録して、入力可能な文字のセットを制約し、属性で指定された文字のみを入力できるようにします。要素の場合「data-messageid」属性もあります。この属性の値は、ドキュメント内の別の要素のIDとして解釈されます。ユーザーが無効な文字を入力すると、指定されたIDの要素が表示されます。ユーザーが有効な文字を入力すると、メッセージ項目は非表示になります。このメッセージ要素は、ユーザー入力が拒否された理由の説明を表示することを目的としています。最初は見えないように、CSSでスタイルを設定する必要があります。 * / whenReady（function（）（//ドキュメントがロードされたときにこの関数を呼び出す//すべての要素を取得する var inputelts = document.getElementsByTagName（ "input"）; // forループでそれらをバイパスします（var i = 0; i< inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и целевой элемент target var e = event || window.event; // Модель стандартная или IE var target = e.target || e.srcElement; // Модель стандартная или IE var text = null; // Введенный текст // Получить введенный символ или текст if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // Это было событие keypress // Введенный печатаемый символ в Firefox сохраняется в свойстве charCode var code = e.charCode || e.keyCode; // Если была нажата какая либо функциональная клавиша, не фильтровать ее if (code < 32 || // Управляющий символ ASCII e.charCode == 0 || // Функциональная клавиша (в Firefox) e.ctrlKey || e.altKey) // Удерживаемая клавиша-модификатор return; // Не фильтровать это событие // Преобразовать код символа в строку var text = String.fromCharCode(code); } // Отыскать необходимую нам информацию в этом элементе input var allowed = target.getAttribute("data-allowed-chars"); // Допустимые символы var messageid = target.getAttribute("data-messageid"); // Сообщение id if (messageid) // Если указано значение id, получить элемент var messageElement = document.getElementById(messageid); // Обойти в цикле символы во введенном тексте for(var i = 0; i < text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем регулярное выражение if (c.search(allowed) == -1) { // Недопустимый символ? // Отобразить элемент с сообщением, если указан if (messageElement) messageElement.style.visibility="visible"; // Отменить действия по умолчанию, чтобы предотвратить вставку текста if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; } } // Если все символы оказались допустимыми, скрыть элемент // с сообщением, если он был указан if (messageElement) messageElement.style.visibility = "hidden"; } });

以下は、このモジュールを使用したサンプルHTMLマークアップです。

次の図は、このフォームの使用法を示しています。ここで、名前を入力した後、自動的にブロックされた数字を挿入すると、警告メッセージが表示されました。

keypressイベントとtextinputイベントは、フォーカスされたドキュメント要素に新しいテキストが実際に挿入される直前に発生するため、ハンドラーはイベントをキャンセルすることでテキストが挿入されないようにすることができます。

ブラウザもイベントを実装します入力これは、テキストが要素に挿入された後に発生します。このイベントはキャンセルできず、対応するイベントオブジェクトには、挿入されたテキストに関する情報が含まれていません。要素のテキストコンテンツが変更されたことを通知するだけです。たとえば、大文字のみを入力するようにしたい場合は、次のように入力イベントハンドラーを定義できます。

入力イベントはHTML5仕様で標準化されており、IEを除くすべての最新のブラウザーでサポートされています。カスタムイベントを使用して入力テキスト要素のvalueプロパティの変更を検出することにより、IEでも同様の効果を実現できます。 propertychange.

キーボードイベント

開発 キーダウンと キーアップユーザーがキーボードのキーを押すか離したときに発生します。これらは、修飾キー、ファンクションキー、および英数字キー用に生成されます。ユーザーがオートリピートモードを開始するのに十分な時間キーを押し続けると、キーアップイベントが発生する前に多くのキーダウンイベントが生成されます。

これらのイベントに対応するイベントオブジェクトには、プロパティがあります キーコード押されたキーを識別する数値を使用します。一般に、印刷可能な文字を生成するキーの場合、keyCodeプロパティには、キーに示されている基本文字に対応するUnicodeコードポイントが含まれます。文字を含むキーは、Shiftキーの状態に関係なく、大文字に対応するkeyCode値を常に生成します。これは、これらがキーに示されている文字であるためです。

同様に、Shiftキーを押しながら句読点を入力した場合でも、数字キーは常にキーに表示されている数字と一致するkeyCode値を生成します。印刷可能な文字と一致しないキーの場合、keyCodeプロパティには他の意味があります。これらのkeyCodeプロパティ値は標準化されたことがありません。ただし、ブラウザ間でそれほど違いがないため、移植性は保証されません。

マウスイベントオブジェクトと同様に、キーボードイベントオブジェクトにはプロパティがあります altKey, ctrlKey, metaKeyと シフトキーこれは、イベントが発生したときに対応する修飾キーが押された場合にtrueになります。

keydownおよびkeyupイベントとkeyCodeプロパティは、10年以上前から存在していますが、標準化されたことはありません。 DOMレベル3イベントドラフトは、キーダウンおよびキーアップイベントタイプを標準化しますが、keyCodeプロパティは標準化しません。代わりに、新しいプロパティkeyを定義します。これには、キーの名前が文字列として含まれている必要があります。キーが印刷可能な文字と一致する場合、keyプロパティにはその印刷可能な文字が含まれている必要があります。ファンクションキーの場合、keyプロパティには、F2、Home、Leftなどの値が含まれている必要があります。

この記事の執筆時点では、DOMレベル3のイベントキープロパティはまだどのブラウザにも実装されていません。ただし、Webkitベースのブラウザ、Safari、およびChromeは、これらのイベントオブジェクトのプロパティを定義します keyIdentifier..。 keyプロパティのようなファンクションキーの場合、keyIdentifierプロパティには数値は含まれませんが、ShiftやEnterなどのキーの名前が付いた文字列が含まれます。印刷可能な文字に対応するキーの場合、このプロパティには、文字のUnicodeコードポイントの使いにくい文字列表現が含まれます。たとえば、AキーはU +0041に対応します。

以下の例では、PageUp、Alt_Z、ctrl + alt + shift + F5などのショートカット識別子をこれらのキーストロークに応答して呼び出されるJavaScript関数にマップするKeymapクラスを定義しています。キーバインド定義は、プロパティ名がショートカット識別子に対応し、プロパティ値にハンドラー関数への参照が含まれているJavaScriptオブジェクトの形式でKeymap（）コンストラクターに渡されます。バインディングは、bind（）メソッドとunbind（）メソッドを使用して追加および削除されます。

install（）メソッドを使用して、KeymapオブジェクトをHTML要素（通常はDocumentオブジェクト）にインストールします。 Keymapオブジェクトを設定すると、この要素のkeydownイベントのハンドラーが登録されます。キーが押されるたびに、ハンドラーはその組み合わせに一致する関数をチェックします。関数が存在する場合は、それが呼び出されます。

キーダウンイベントハンドラーは、DOMレベル3イベントキープロパティが存在する場合はそれを使用します。それ以外の場合は、WebkitkeyIdentifierプロパティを使用しようとします。また、フォールバックとして、ハンドラーは非標準のkeyCodeプロパティを使用します。

//コンストラクター関数functionKeymap（bindings）（this.map =（）; //マッピング識別子を定義->ハンドラーif（bindings）（//初期バインディングマップをそれにコピーするfor（name in bindings）this.bind（ name、bindings）;））//ハンドラーによって指定されたキー識別子を指定された関数にバインドしますKeymap.prototype.bind = function（key、func）（this.map = func;）; //指定されたキーIDのバインディングを削除しますKeymap.prototype.unbind = function（key）（delete this.map;）; //このKeymapオブジェクトを指定されたHTML要素にインストールしますKeymap.prototype.install = function（element）（var keymap = this; //イベントハンドラー関数を定義しますfunction handler（event）（return keymap.dispatch（event、element）;） //設定if（element.addEventListener）element.addEventListener（ "keydown"、handler、false）; else if（element.attachEvent）element.attachEvent（ "onkeydown"、handler）;）; //このメソッドは、バインディングに基づいてキーボードイベント処理を委任しますKeymap.prototype.dispatch = function（event、element）（//最初は、修飾キー名またはキー名はありませんvar Modifiers = ""; var keyname = null; / /小文字から//正規の修飾子文字列をアルファベット順に作成します。If（event.altKey）修飾子+ = "alt_"; if（event.ctrlKey）修飾子+ = "ctrl_"; if（event .metaKey）修飾子+ = " meta_ "; if（event.shiftKey）修飾子+ =" shift_ "; //キープロパティが実装されている場合、キー名は簡単に取得できます。//DOMレベル3標準で定義されています：if（event.key）keyname = event.key; // keyIdentifierプロパティを使用して// SafariとChromeの関数キーの名前を取得できますelseif（event.keyIdentifier && event.keyIdentifier.substring（0,2）！== "U +"） keyname =event。keyIdentifier; //それ以外の場合は、keyCodeプロパティを使用して//コード> nameをelsekeの下に表示できます。 yname = Keymap.keyCodeToKeyName; //キー名を特定できなかった場合は、イベントを無視して//戻ります。 if（！keyname）return; //正規のキー識別子は、修飾子名//と小文字のキー名で構成されますvar keyid = Modifiers + keyname.toLowerCase（）; //指定されたキーIDのバインディングがあるかどうかを確認しますvarhandler = this.map; if（handler）（//ハンドラーがこのキー用である場合は、それを呼び出します//ハンドラー関数を呼び出しますvar retval = handler.call（element、event、keyid）; //ハンドラーがfalseを返した場合は、デフォルトのアクションをキャンセルします/ /そしてバブリングイベントを中止しますif（retval === false）（if（event.stopPropagation）event.stopPropagation（）; // DOMモデルelseevent.cancelBubble = true; // IEモデルif（event.preventDefault）event。 PreventDefault（）; / / DOM else event.returnValue = false; // IE）//ハンドラーから受け取った値を返しますreturn retval;））; //キー識別子を標準形式に変換するためのヘルパー関数。 //「meta」識別子を「ctrl」に変換して// Meta-C識別子がMacでは「Command-C」、その他すべてでは「Ctrl-C」になるようにする必要があります。 Keymap.normalize = function（keyid）（keyid = keyid.toLowerCase（）; //小文字のvarwords = keyid.split（/ \ s + | [\-+ _] /）; //修飾子を抽出varkeyname = words。 pop（）; //キー名は最後の単語ですkeyname = Keymap.aliases || keyname; //これはエイリアスですか？words.sort（）; //修飾子を並べ替えますwords.push（keyname）; //正規化されたものを元に戻しますname return words .join（ "_"）; //すべてをまとめる）Keymap.aliases =（//おなじみのキーエイリアスを// DOMレベル3で使用される「公式」名にマップし、キーコードを//マップします。名前と値は小文字のみで構成する必要があります "escape"： "esc"、 "return"： "enter"、 "delete"： "del"、 "ctrl"： "control"、 "space" ： "スペースバー"、 "ins"： "挿入"）; // keydownイベントオブジェクトの古いkeyCodeプロパティは標準化されていません//しかし、次の値はほとんどのブラウザとオペレーティングシステムで正常に使用できます。 Keymap.keyCodeToKeyName =（//単語または矢印が付いたキー8： "Backspace"、9： "Tab"、13： "Enter"、16： "Shift"、17： "Control"、18： "Alt"、 19：「一時停止」、20：「CapsLock」、27：「Esc」、32：「スペースバー」、33：「PageUp」、34：「PageDown」、35：「終了」、36：「ホーム」、37：「左」、38：「上」、39：「右」、40：「下」、45：「挿入」、46：「削除」、//メインキーボードの数字キー（セカンダリではない）48： "0"、49： "1"、50： "2"、51： "3"、52： "4"、53： "5"、54： "6"、55： "7"、56： "8 "、57：" 9 "、//文字キー。//大文字と小文字の区別がないことに注意してください。65：" A "、66：" B "、67：" C "、68：" D " 、69：「E」、70：「F」、71：「G」、72：「H」、73：「I」、74：「J」、75：「K」、76：「L」、77 ： "M"、78： "N"、79： "O"、80： "P"、81： "Q"、82： "R"、83： "S"、84： "T"、85： " U "、86：" V "、87：" W "、88：" X "、89：" Y "、90：" Z "、//追加のキーボードの数字キーと句読点付きのキー。//（ Operaではサポートされていません。）96： "0"、97： "1"、98： "2"、99： "3"、100： "4"、101： "5"、102： "6"、103： "7"、104： "8"、105： "9"、106： "乗算"、107： "追加"、109： "S ubtract "、110：" Decimal "、111：" Divide "、//ファンクションキー112：" F1 "、113：" F2 "、114：" F3 "、115：" F4 "、116：" F5 "、117 ： "F6"、118： "F7"、119： "F8"、120： "F9"、121： "F10"、122： "F11"、123： "F12"、124： "F13"、125： " F14 "、126：" F15 "、127：" F16 "、128：" F17 "、129：" F18 "、130：" F19 "、131：" F20 "、132：" F21 "、133：" F22 " 、134： "F23"、135： "F24"、// Shiftキーを押したまま入力する必要のない//パンクチュエーションキー。 //ハイフンを移植可能な方法で使用することはできません：FFは//減算キーと同じコードを返します59： ";"、61： "="、186： ";"、187： "="、// FirefoxとOperaは59.61188： "、"、190： "。"、191： "/"、192： "` "、219：" ["、220：" \\ "、221："] "、222：を返します。 "" "）;

Keymapオブジェクトの使用例を以下に示します。

Window.onload = function（）（var keymap = new Keymap; //新しいKeymapオブジェクトを作成しますkeymap.bind（ "ctrl + a"、// Ctrl +ショートカット関数（event、keyid）（alert（ "あなたが押した： "+ keyid）））; //別のバインディングCtrl + Enter keymap.bind（" ctrl + enter "、function（event、keyid）（alert（" You Pressed： "+ keyid）））; keymap.install（document。 body）; //ドキュメント全体のKeymapオブジェクトを設定します）;

javascriptイベントを文書化します。 JavaScript-イベントの種類。 イベントを正しい要素に添付します