mozilla
Your Search Results

    event

    Introduction

    この章では DOM Event Model を解説します。 Event インターフェイスを解説し、同様に DOM ノードへのイベント登録インターフェイス、イベントリスナを解説します。そして、さまざまなイベントインターフェイスがお互いにどのように関連しているのかを示す長めの例をいくつか掲載します。

    DOM における3段階のイベントの流れをはっきり説明する優れた図が DOM Level 3 Events draft にあります。

    また、例5: イベント伝播 (propagation) も参照するとよいでしょう。DOM の中でイベントがどのように動くかについてのより詳しい例があります。

    イベントリスナを登録する

    DOM要素にイベントハンドラを登録する方法は3つあります。

    EventTarget.addEventListener

    // myButtonがボタン要素であるとして
    myButton.addEventListener('click', function(){alert('Hello world');}, false);

    これは、あなたが現代のウェブページで使用するべき方法です。

    ノート: Internet Explorer 6-8 はこの方法をサポートしませんでした。そして、その代わりに類似した element.attachEvent API を提供しました。クロスブラウザ互換性のために、利用できる多くの JavaScript ライブラリの1つを使ってください。

    より多くの詳細は、EventTarget.addEventListener 参照ページで見つかります。

    HTML属性

    <button onclick="alert('Hello world!')">

    属性を使った JavaScript コードは、event 引数を通してイベントオブジェクトを渡されます。戻り値は特別な方法で扱われます。HTML仕様書に説明があります。

    この方法は避けるべきです。これはマークアップを大きくし、読みづらくします。「コンテンツ/構造」と「ふるまい」の関係がうまく切り離されません。そして、見つけるのが難しいバグをつくります。

    DOM要素のプロパティ

    // myButtonがボタン要素であるとして
    myButton.onclick = function(event){alert('Hello world');};

    event 引数をとる関数を定義できます。戻り値は特別な方法で扱われます。HTML仕様書に説明があります。

    この方法の問題は、ひとつの要素のひとつのイベントにつき、ひとつのハンドラしかセットできないことです。

    DOM Event インターフェイス

    イベントハンドラはDOM要素、文書、ウインドウオブジェクト、その他さまざまなオブジェクトに付けられる可能性があります。イベントが起きたとき、イベントオブジェクトがつくられて、順番にイベントリスナに渡されます。

    ハンドラ関数に最初の引数として渡されるイベントオブジェクトを通して、DOM Event インターフェイスを利用できます。以下の単純な例で、イベントオブジェクトがどのようにイベントハンドラ関数に渡され、そしてそのような関数内でどのように使われるかを示します。

    function foo(evt) {
      // evt引数はイベントオブジェクトを自動的に割り当てられます
      alert(evt);
    }
    table_el.onclick = foo;
    

    DOM event subclasses

    Properties

    event.bubbles
    イベントが浮上(bubble up)するか、boolean値を示します。
    event.cancelBubble
    そのイベントの浮上(bubbling)がキャンセルされたか、boolean値を示します。
    event.cancelable
    イベントがキャンセル可能か、boolean値を示します。
    event.currentTarget
    イベントが現在登録されているターゲットへの参照。
    event.defaultPrevented
    event.preventDefault() がイベントで呼ばれたかどうか示します。
    event.eventPhase
    現在評価されているのがイベントの流れのうちどの段階にあたるのかを示します。
    event.explicitOriginalTarget
    イベントの明確な最初のターゲット。(Mozilla特有)
    event.originalTarget
    イベントの再ターゲット前の最初のターゲット。(Mozilla特有)
    event.target
    イベントが最初に送出されたターゲットへの参照。
    event.timeStamp
    イベントが生成された時刻。
    event.type
    イベントの名前。(大文字小文字を区別しない)
    event.isTrusted
    イベントがブラウザによって開始されたか (たとえばユーザクリックの後)、または、スクリプトによって開始されたか (event.initEvent のようなイベントを作るメソッドの使用) どうかを示します。

    Methods

    event.initEvent
    DocumentEvent インターフェイスによって生成されたイベントの値を初期化します。
    event.preventBubble 廃止 Gecko 24
    イベントが浮上(bubbling)しないようにします。廃止されたので、代わりに stopPropagation を使ってください。
    event.preventCapture 廃止 Gecko 24
    廃止されたので、stopPropagation を使ってください。
    event.preventDefault
    イベントをキャンセルします。(キャンセル可能な場合のみ)
    event.stopImmediatePropagation
    この特定のイベントのために、他のいかなるリスナも呼び出されません。 同じ要素に付けられたリスナも、後で横断される要素に付けられたリスナも(たとえばキャプチャ段階の)。
    event.stopPropagation
    これ以上イベントが伝播(propagation)するのを停止します。

    See also

     

    ドキュメントのタグと貢献者

    Contributors to this page: Yukoba, ethertank, Luna8bit, siokoshou, AshfaqHossain
    最終更新者: AshfaqHossain,