Loading article…
DOM (Document Object Model) イベントは、何かが起こった、または起こっていることを示す信号であり、ユーザーの操作またはブラウザによってトリガーされます。[ 1 ] JavaScript、JScript、VBScript、Javaなどのクライアントサイドスクリプト言語は、 HTML、XHTML、XUL、SVGドキュメントなどのDOMツリー内の要素ノードにさまざまなイベントハンドラまたはリスナーを登録できます。
DOMイベントの例：
歴史的に見ると、DOMと同様に、さまざまなWebブラウザで使用されるイベントモデルには大きな違いがあり、互換性の問題を引き起こしていました。この問題を解決するために、イベントモデルはWorld Wide Web Consortium（W3C）によってDOMレベル2として標準化されました。
ほとんどの要素ノードによって生成できるイベントは膨大です。
上記のイベント分類は、W3Cの分類と完全に一致するものではないことに注意してください。
名前が「DOM」で始まるイベントは現在十分にサポートされておらず、パフォーマンス上の理由などから、W3C の DOM レベル 3 では非推奨となっています。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アプリケーションの開発者が、ユーザーが直前の操作を取り消そうとする意図を傍受したい場合、以下のすべてのイベントを「監視」する必要があります。
前の操作を「取り消す」という、単一の標準化されたリクエストを監視する方が簡単だろう。
一般的な（W3C）イベントに加えて、Internet Explorerは2つの主要なタイプのイベントを追加しています。これらのイベントの一部は、他のブラウザによって事実上の標準として実装されています。
Mozilla、Safari、Operaは、 XMLHttpRequestオブジェクトのreadystatechangeイベントもサポートしていることに注意してください。Mozillaは、従来のイベント登録方法（DOMレベル0）を使用してbeforeunloadイベントもサポートしています。MozillaとSafariはコンテキストメニューもサポートしていますが、Mac版Internet Explorerはサポートしていません。
Firefox 6以降は、beforeprintイベントとafterprintイベントをサポートしていることに注意してください。
Mozillaは、一般的な（W3C）イベントに加えて、 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つ考えられます。
W3Cはこの論争において中立的な立場を取っている。[ 18 ]： §1.2
W3Cによると、イベントターゲットがツリーに参加する場合、イベントは3つのフェーズを経る。
event.bubbles == true）に対してのみ発生します。このイベントの流れの視覚化は、https://domevents.devでご覧いただけます。
イベントがイベントリスナーを通過する間、イベントは停止event.stopPropagation()またはevent.stopImmediatePropagation()
event.stopPropagation()現在のイベントフェーズで現在のイベントターゲットにアタッチされているすべてのイベントリスナーが終了すると、イベントは停止します。event.stopImmediatePropagation()イベントは即座に停止され、それ以上のイベントリスナーは実行されません。イベントが停止されると、イベントパスに沿って移動しなくなります。イベントを停止しても、イベントがキャンセルされるわけではありません。
event.cancelBubbleに設定するtrueevent.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;">ジョー</a> ！</p><script> function triggerAlert ( name ) { window.alert ( " Hey " + name ) ; } </script> </body> </html>インラインモデルに関するよくある誤解の一つは、関数内でカスタム引数を使用してイベントハンドラを登録できるというものです。上記の例ではそのように見えるかもしれませんが、実際にはブラウザのJavaScriptエンジンが属性内のステートメントを含む匿名関数を作成します。要素のハンドラは、次の匿名関数にバインドされます。nametriggerAlertonclickonclick
function () { triggerAlert ( 'Joe' ); return 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 ( 'やあ、' + 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></body> </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.attachEvent ( " onclick " , heyJoe ); // 別のイベントハンドラを追加window.attachEvent ( " onload" , heyJoe ) ; //追加したイベントハンドラを削除window.detachEvent ( " onload " , heyJoe ) ; </script></body> </html>{{cite web}}: CS1 maint: bot: 元の URL の状態が不明です (リンク)