DOMイベント

DOM（ドキュメントオブジェクトモデル）イベントは、何かが発生した、または発生中であるという信号であり、ユーザーの操作またはブラウザによってトリガーされます。^[1] JavaScript、JScript、VBScript、Javaなどのクライアント側スクリプト言語は、 HTML、XHTML、XUL、SVGドキュメントなどのDOMツリー内の要素ノードにさまざまなイベントハンドラまたはリスナーを登録できます。

DOM イベントの例:

• ユーザーがマウスをクリックすると
• ウェブページが読み込まれたとき
• 画像が読み込まれたとき
• マウスを要素の上に移動すると
• 入力フィールドが変更されたとき
• HTMLフォームが送信されると
• ユーザーがキーを押すと^[2]

歴史的に、DOM と同様に、さまざまなWeb ブラウザーで使用されるイベント モデルにはいくつかの大きな違いがあり、互換性の問題が発生していました。この問題に対処するために、イベント モデルはWorld Wide Web Consortium (W3C) によって DOM レベル 2 で 標準化されました。

ほとんどの要素ノードによって生成できるイベントの膨大なコレクションがあります。

• マウスイベント。^{[3] [4]}
• キーボードイベント。
• HTML フレーム/オブジェクト イベント。
• HTML フォーム イベント。
• ユーザー インターフェイス イベント。
• ミューテーション イベント (ドキュメントの構造の変更に関する通知)。
• 進行イベント^[5]（XMLHttpRequestおよびFile API ^[6]で使用される）。

上記のイベント分類は W3C の分類とまったく同じではないことに注意してください。

名前が「DOM」で始まるイベントは現在十分にサポートされておらず、このためおよびその他のパフォーマンス上の理由から、DOM レベル 3 では W3C によって非推奨とされていることに注意してください。MozillaとOpera は、DOMAttrModified、DOMNodeInserted、DOMNodeRemoved、およびDOMCharacterDataModifiedをサポートしています。ChromeとSafari は、DOMAttrModifiedを除くこれらのイベントをサポートしています。

AppleのiOSやGoogleのAndroidなどのタッチ対応デバイス上で動作するWebブラウザは、追加のイベントを生成します。^{[9] ：§5.3}

W3Cの勧告案では、は位置のリスト、アクティブだった修飾キー、対象のDOM要素内の位置のリスト、前回の以降に変更された位置のリストTouchEventを返します。^[9]TouchListTouchTouchListTouchTouchListTouchTouchEvent

Appleはこのワーキンググループに参加せず、推奨プロセスの後半で特許を公開することでタッチイベント仕様のW3C推奨を遅らせた。 ^[10]

マウス、タッチパネル、ペンなど、さまざまな種類の入力デバイスを備えたデバイス上のWebブラウザーは、統合入力イベントを生成する場合があります。ユーザーは、どのタイプの入力デバイスが押されたか、そのデバイスでどのボタンが押されたか、スタイラスペンの場合はボタンがどの程度強く押されたかを確認できます。2013年10月現在、このイベントはInternet Explorer 10と11でのみサポートされています。^[11]

まだ実際には実装されていませんが、Indie UIワーキンググループは、Webアプリケーション開発者が、それに一致する可能性のあるさまざまなプラットフォーム固有の技術イベントを処理することなく、標準的なユーザーインタラクションイベントをサポートできるようにしたいと考えています。^[12]

使いやすいインターフェースをスクリプト化するのは難しい場合があります。特に、ユーザー インターフェースの設計パターンがソフトウェア プラットフォーム、ハードウェア、ロケールによって異なること、またそれらのインタラクションが個人の好みに基づいてさらにカスタマイズできることを考慮すると、困難になります。個人は自分のシステムでのインターフェースの動作に慣れているため、好みのインターフェースは Web アプリケーション作成者の好みのインターフェースとは異なる場合があります。

たとえば、Web アプリケーションの作成者は、ユーザーの最後のアクションを元に戻す意図を傍受したい場合、次のすべてのイベントを「リッスン」する必要があります。

• Windows および Linux では Control+Z。
• Mac OS X では Command+Z。
• 一部のモバイル デバイスでのシェイク イベント。

前のアクションを「元に戻す」ための単一の正規化されたリクエストをリッスンする方が簡単です。

共通 (W3C) イベントに加えて、Internet Explorerでは 2 つの主要なタイプのイベントが追加されています。一部のイベントは、他のブラウザで事実上の標準として実装されています。

• クリップボードイベント。
• データバインディングイベント。^{[説明が必要]}

Mozilla、Safari、Opera もXMLHttpRequestオブジェクトの readystatechange イベントをサポートしていることに注意してください。Mozilla は、従来のイベント登録方法 (DOM レベル 0) を使用した beforeunload イベントもサポートしています。Mozilla と Safari もコンテキスト メニューをサポートしていますが、Mac 版 Internet Explorer はサポートしていません。

Firefox 6 以降では beforeprint および afterprint イベントがサポートされていることに注意してください。

一般的な (W3C) イベントに加えて、Mozilla はXUL要素でのみ機能する一連のイベントを定義しました。^{[引用が必要]}

Mozilla と Opera 9 には、DOM コンテンツがロードされたときに発生する、文書化されていないイベントであるDOMContentLoadedとDOMFrameContentLoadedもあります。これらは、関連ファイル (画像など) がロードされる前に発生するため、「load」とは異なります。ただし、DOMContentLoaded はHTML 5仕様に追加されています。^[13] DOMContentLoaded イベントは、Webkitレンダリング エンジン ビルド 500+ でも実装されています。^{[14] [15]これは、} Google ChromeとSafari 3.1+のすべてのバージョンに関係します。DOMContentLoaded は、 Internet Explorer 9でも実装されています。^[16]

Opera 9 は、Web Forms 2.0 イベントDOMControlValueChanged、invalid、forminput、formchangeもサポートしています。

ツリーに 2 つのイベント ターゲットが参加している状況を考えてみましょう。 どちらにも、同じイベント タイプ (「クリック」など) に登録されたイベント リスナーがあります。 ユーザーが内部の要素をクリックすると、次の 2 つの方法で処理できます。

• 要素を外側から内側へトリガーします (イベント キャプチャ)。このモデルはNetscape Navigatorに実装されています。
• 要素を内側から外側へトリガーする（イベントバブリング）。このモデルはInternet Explorerやその他のブラウザに実装されています。^[17]

W3Cはこの闘争において中立的な立場を取っている。^{[18] : §1.2}

W3C によれば、イベント ターゲットがツリーに参加すると、イベントは次の 3 つのフェーズを経ます。

1. キャプチャフェーズ: イベントはルートイベントターゲットからイベントのターゲットまで移動します。
2. ターゲットフェーズ: イベントはイベントターゲットを通過する
3. バブルフェーズ（オプション）：イベントは、イベントのターゲットからルートイベントターゲットまで戻ります。バブルフェーズは、バブルするイベントに対してのみ発生します（ここでevent.bubbles == true）

このイベントフローの視覚化は https://domevents.dev でご覧いただけます。

イベントがイベントリスナーを通過している間、イベントはevent.stopPropagation()またはで停止できます。event.stopImmediatePropagation()

• event.stopPropagation(): 現在のイベントフェーズで現在のイベントターゲットにアタッチされているすべてのイベントリスナーが終了した後、イベントは停止されます。
• event.stopImmediatePropagation(): イベントは直ちに停止され、それ以上のイベントリスナーは実行されません

イベントが停止されると、イベント パスに沿って移動しなくなります。イベントを停止しても、イベントはキャンセルされません。

• を（Internet Explorer）event.cancelBubbleに設定しますtrue
• プロパティevent.returnValueをfalse

イベントcancelableは を呼び出すことでキャンセルできますevent.preventDefault()。イベントをキャンセルすると、そのイベントに対するデフォルトのブラウザ動作が無効になります。イベントがキャンセルされると、event.defaultPreventedプロパティは に設定されますtrue。イベントをキャンセルしても、イベント パスに沿ったイベントの移動は停止しません。

Event オブジェクトは、ターゲット要素、押されたキー、押されたマウス ボタン、マウスの位置など、特定のイベントに関する多くの情報を提供します。残念ながら、この領域ではブラウザーの非互換性が非常に深刻です。そのため、この記事では W3C Event オブジェクトについてのみ説明します。

このイベント処理モデルはNetscape Navigatorによって導入され、2005 年現在でも最もクロスブラウザなモデルとなっています^{[アップデート]}。^[要出典]モデルには、インライン モデルと従来のモデルの 2 種類があります。

インラインモデルでは、^[20]イベントハンドラが要素の属性として追加されます。以下の例では、ハイパーリンクがクリックされた後に「Hey Joe」というメッセージを含む警告ダイアログボックスが表示されます。デフォルトのクリックアクションは、イベントハンドラでfalseを返すことによってキャンセルされます。

<!doctype html> 
< html lang = "en" > < head > < meta charset = "utf-8" > < title >インラインイベント処理</ title > </ head > < body > 

	 
	



	< h1 >インラインイベント処理</ h1 >

	< p >こんにちは< a  href = "http://www.example.com"  onclick = "triggerAlert('Joe'); return false;" > Joe </ a > ! </ p >

	<スクリプト> 
function triggerAlert ( name ) { window . alert ( "Hey " + name ); } </スクリプト> </ body > </ html >		  
			  
		
	

インライン モデルに関するよくある誤解^[要出典]nameの 1 つは、関数などでカスタム引数を持つイベント ハンドラーを登録できるという考え方ですtriggerAlert。上記の例ではそのように見えるかもしれませんが、実際には、ブラウザーのJavaScript エンジンが属性内のステートメントを含む匿名関数onclickを作成します。onclick要素のハンドラーは、次の匿名関数にバインドされます。

関数() { triggerAlert ( 'Joe' ); falseを返す; }  
	
	 

JavaScript イベント モデルのこの制限は、通常、イベント ハンドラーの関数オブジェクトに属性を割り当てるか、クロージャを使用することによって克服されます。

^{従来のモデル[21]}では、スクリプトによってイベントハンドラを追加または削除できます。インラインモデルと同様に、各イベントにはイベントハンドラを1つだけ登録できます。イベントは、要素オブジェクトのイベントプロパティにハンドラ名を割り当てることによって追加されます。イベントハンドラを削除するには、プロパティをnullに設定するだけです。

<!doctype html> 
< html  lang = "en" > 
< head > 
	< meta  charset = "utf-8" > 
	< title >従来のイベント処理</ title > 
</ head >

< body > 
	< h1 >従来のイベント処理</ h1 >
	
	< p >やあ、ジョー！</ p >

	< script > 
var triggerAlert = function () { window . alert ( "Hey Joe" ); }; // イベント ハンドラーを割り当てますdocument . onclick = triggerAlert ; // 別のイベント ハンドラーを割り当てますwindow . onload = triggerAlert ; // 割り当てたイベント ハンドラーを削除しますwindow . onload = null ; </ script > </ body > </ html >		     
			
		
		
		
		  
		
		
		  
		
		
		  
	

パラメータを追加するには:

var name = ' Joe' ; document.onclick = ( function ( name ) { return function () { alert ( 'Hey ' + name + '!' ); } ; }( name ));   
    
	   
		    
	

内部関数はそのスコープを保持します。

W3CはDOMレベル2でより柔軟なイベント処理モデルを設計した。^[18]

知っておくと便利なこと:

• イベントがバブリングするのを防ぐには、開発者はstopPropagation()イベント オブジェクトのメソッドを呼び出す必要があります。
• イベントのデフォルトのアクションが呼び出されないようにするには、開発者はpreventDefault()イベント オブジェクトのメソッドを呼び出す必要があります。

従来のモデルとの主な違いは、同じイベントに対して複数のイベント ハンドラーを登録できることです。useCaptureオプションを使用して、ハンドラーをバブリング フェーズではなくキャプチャ フェーズで呼び出すように指定することもできます。このモデルは、 Mozilla、Opera、Safari、Chrome、Konquerorでサポートされています。

<!doctype html> 
< html lang = "en" > < head > < meta charset = "utf-8" > < title > DOM レベル 2 </ title > </ head > 

      
     


< body > 
     < h1 > DOM レベル 2 </ h1 >
     
     < p >やあ、ジョー！</ p >
     
     
     < script > 
var heyJoe = function () { window . alert ( "Hey Joe!" ); } // イベント ハンドラーを追加しますdocument . addEventListener ( "click" , heyJoe , true ); // キャプチャ フェーズ// 別のイベント ハンドラーを追加しますwindow . addEventListener ( "load" , heyJoe , false ); // バブリング フェーズ// 追加したイベント ハンドラーを削除しますwindow . removeEventListener ( "load" , heyJoe , false ); </ script >               
               
          
          
          
                
          
          
                
          
          
              
     

</ボディ> 
</ html >

Microsoft Internet Explorerのバージョン8より前は、W3C標準の批准前に独自のモデルが作成されたため、W3Cモデルに従っていません。Internet Explorer 9はDOMレベル3イベントに従います^{[22]。Internet} Explorer 11はMicrosoft固有のモデルのサポートを削除します。^[23]

知っておくと便利なこと:

• イベントのバブリングを防ぐには、開発者はイベントのcancelBubbleプロパティを設定する必要があります。
• イベントのデフォルトアクションが呼び出されないようにするには、開発者はイベントのreturnValueプロパティを設定する必要があります。
• キーワードthisはグローバルwindowオブジェクトを参照します。

このモデルは、同じイベントに対して複数のイベント ハンドラーを登録できるという点で従来のモデルと異なります。ただし、ハンドラーをキャプチャ フェーズで呼び出すように指定するオプションは使用できません。このモデルは、Microsoft Internet ExplorerおよびTrident ベースのブラウザー( Maxthon、Avant Browser など)useCaptureでサポートされています。

<!doctype html> 
< html  lang = "en" > 
< head > 
     < meta  charset = "utf-8" > 
     < title > Internet Explorer 固有のモデル</ title > 
</ head > 
< body > 
     < h1 > Internet Explorer 固有のモデル</ h1 >

     < p >やあ、ジョー！</ p >

     < script > 
var heyJoe = function () { window . alert ( "Hey Joe!" ); } // イベント ハンドラーを追加しますdocument . attachmentEvent ( "onclick" , heyJoe ); // 別のイベント ハンドラーを追加しますwindow . attachmentEvent ( "onload" , heyJoe ); // 追加したイベント ハンドラーを削除しますwindow . detachEvent ( "onload" , heyJoe ); </ script >               
               
          
          
          
           
          
          
           
          
          
           
     

</ボディ> 
</ html >

• デイテル、ハーベイ (2002)。インターネットとワールドワイドウェブ：プログラミング方法（第2版）。ISBN 0-13-030897-8 
• Mozilla 組織 (2009)。DOM イベント リファレンス。2009 年 8 月 25 日閲覧。
• Quirksmode (2008)。イベント互換性テーブル。2008 年 11 月 27 日閲覧。
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

• ドキュメント オブジェクト モデル (DOM) レベル 2 イベント仕様
• ドキュメント オブジェクト モデル (DOM) レベル 3 イベント ワーキング ドラフト
• DOM4: イベント (編集者ドラフト)
• UI イベント ワーキング ドラフト
• ポインタイベント W3C 候補勧告
• MSDN ポインタイベント
• domevents.dev - 探索を通じて DOM イベントについて学ぶためのビジュアライザー
• イベントバブリングとキャプチャのための JS フィドル