EventTarget.addEventListener

  • リビジョンの URL スラッグ: DOM/element.addEventListener
  • リビジョンのタイトル: element.addEventListener
  • リビジョンの ID: 335767
  • 作成日:
  • 作成者: Yoshino
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{DomRef}} {{translationinprogress}}

概要

addEventListener は、一つのイベントターゲットにイベントリスナーを一つ登録します。イベントターゲットは、ドキュメント上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、XMLHttpRequest です。

ターゲットに対して 二つ以上のイベントリスナーを登録するには、同じターゲットに対して、異なるイベントタイプ、あるいは、キャプチャパラメータを指定して addEventListener() を呼び出します。

構文

target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture [, aWantsUntrusted {{ Non-standard_inline }}] ); // Mozilla only
type
リスニングするイベントタイプを表す文字列
listener
指定されたタイプのイベントが発生するときに通知を受け取るオブジェクト。これは、EventListener インターフェースで実装されたオブジェクト、あるいは、単純に、JavaScript の 関数でなければなりません。
useCapture
true の場合、useCapture は、ユーザがキャプチャを開始したいことを示しています。キャプチャの開始後、指定されたタイプのイベントの全てが、まず、登録された listener にディスパッチされ、その後、DOM ツリーにおいてその下に位置する任意の EventTarget にディスパッチされます。ツリーをたどって上方へバブリングするイベントは、キャプチャを用いるように指定されたリスナーを誘発することはありません。詳細については、DOM Level 3 Events を参照してください。
aWantsUntrusted {{ Non-standard_inline() }}
true の場合、信頼されないコンテンツによって引き起こされるイベントを許可します。特権ページと非特権ページの間のやり取りを参照してください。

<!DOCTYPE html>
<html>
<head>
<title>DOM Event Example</title>

<style>
#t { border: 1px solid red }
#t1 { background-color: pink }
</style>

<script>

// t2 の内容を変更する関数
function modifyText() {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = "three";
}
 
// t にイベントリスナーを追加する関数
function load() {
  var el = document.getElementById("t");
  el.addEventListener("click", modifyText, false);
}

</script>
</head>
<body onload="load();">

<table id="t">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

</body>
</html>

{{ JSFiddleLink("madBYK/UumUP") }}

上記の例では、modifyText()addEventListener() を用いて登録された click イベントのリスナーになっています。table 中のどこをクリックしても、そのハンドラまでバブルし、modifyText() が実行されます。

{{yakuchu('「バブリング(バブルアップ、または単にバブルと呼ばれる事もある)」は リスナーの上位ノードへの伝播を表す用語として用いられます。仕様書内でも "Bubbling" という用語が定義されています')}} (仕様書: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-overview-terminology)

注記

なぜ、addEventListener を使うのですか?

addEventListener は、W3C DOM で仕様化された、イベントリスナーを登録するための方法です。その利点は以下の通りです。

  • イベントに 1 つ以上のハンドラを追加することができます。これは、特に、他のライブラリ/拡張で利用しても上手く動作する必要がある DHTML ライブラリや Mozilla の拡張 のために役立ちます。
  • リスナーが活性化されたときに、その動きを細かくコントールすることを可能にします(キャプチャリング 対 バブリング)。
  • HTML 要素だけでなく、任意の DOM 要素 で動作します。

もうひとつの方法である、イベントリスナーを登録するための古い方法 は、後で説明します。

イベントディスパッチ中のリスナーの追加

EventListener が、イベント処理中に EventTarget に追加された場合、それが現在のアクションによって実行されることはありませんが、バブリングフェーズのように、イベントフローの後の段階中に実行されるかもしれません。

複数の同一のイベントリスナー

複数の同一の EventListener が、同じ EventTarget に同じ引数で登録された場合、重複するインスタンスは反映されません。EventListener が 2 度呼び出されることはなく、重複するインスタンスは反映されないので、removeEventListener で手動で削除する必要はありません。

ハンドラ内での this の値

一連の類似した要素に対して一般的なハンドラを用いたいというような、イベントハンドラが実行される要素を参照したいということがたびたびあります。 addEventListener() に渡す関数で this という値を用いるようにすることで、そのように変更することができます。this の値は、呼び出し元から関数に渡されることに注意してください。

上記の例では、クリックイベントから呼び出されたときの modifyText() 内の this の値は、table 't' への参照となります。これは、HTML ソースに追加された場合に起こる振る舞いとは異なります。:

<table id="t" onclick="modifyText();">
. . .

onclick イベントで呼び出されたときの modifyText() 内の this の値は、グローバル(window)オブジェクトへの参照となります。

注: JavaScript 1.8.5 で Function.prototype.bind() メソッドが導入されました。これは呼び出す関数内で this に相当する値を指定できるものです。これを使えば、関数がどこから呼び出されるかによって this の値が変わってしまうというややこしい問題を簡単に回避できます。ただし、リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります。

以下は bind を使った場合と使わない場合の例です。

var Something = function(element)
{
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // this は element なので undefined になります
  };
  this.onclick2 = function(event) {
    console.log(this.name); // this はバインドされた Something オブジェクトなので「Something Good」と出力されます
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // これが仕掛けです
}

上の例の問題は、bind の付いたリスナーを削除できないということです。もうひとつの解決策は、あらゆるイベントを補足できる handleEvent という特別な関数を使用することです。

var Something = function(element)
{
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // this は Something オブジェクトなので「Something Good」と出力されます
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };

  // この場合のリスナーは this であって this.handleEvent でないことに注意してください
  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);

  // リスナーは適切に削除できます
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}

Internet Explorer

IE では、標準の addEventListener ではなく、 attachEvent を使わなければなりません。IE をサポートするためには、上記の例を以下のように修正しなけれなりません。

if (el.addEventListener){
  el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}

attachEvent の欠点が一つあります。this の値がイベントを起こした要素ではなく、window オブジェクトへの参照になってしまうことです。

イベントリスナーを登録するための古い方法

addEventListener() は、DOM 2 Events 仕様で導入されました。それ以前は、以下のようにイベントリスナーを登録していました。

// 関数へのリファレンスを利用する方法—'()' が無いことに注意していください
el.onclick = modifyText;

// 関数式を利用する方法
element.onclick = function() {
   /* ...文... */
};

このメソッドは、要素上に click イベントリスナーが既に存在する場合、置き換えてしまいます。
{{yakuchu("これはつまり、既に要素に対し定義されたハンドラに対し更にイベントを追加しようとする場合に、以前のイベントを含める形で上書きしなければならない事を意味します。")}}
他のイベント、blur (onblur)、keypress (onkeypress)、などのような関連するイベントハンドラも同様です。

これは本質的には DOM 0 の一部分なので、この方法は、非常に広くサポートされており、特別なクロスブラウザ用のコードも必要ありません。それ故、addEventListener() の独自の機能が必要でない場合に、動的にイベントリスナーを登録する方法として普通に使われています。

メモリに関する問題

メモリ使用量が増大する問題を引き起こす方法に共通しているのは、オブジェクトのメソッドをコールバック関数として渡すことです。

setTimeout(obj.func, 1000);	// |this| が間違って設定される !
document.addEventListener("load", obj.func, false);	// |this| が間違って設定される !

単純な回避策としては、無名関数をコールバックとして渡す方法があります。

document.addEventListener("load", function(event) { obj.func(event); }, false);

注意すべきなのは、この無名関数はそれを内包する環境にある全ての変数にアクセスすることができ、それらの変数が使用するメモリは、その無名関数が使われる可能性がある限りは (つまりイベントリスナが登録されている限りは) JavaScript エンジンによって解放されないということです。この関数に対して維持される必要があるのは実際には obj だけなのに、JavaScript エンジンは他の変数も維持する事を選択し、その結果メモリの負荷が増大します。removeEventListener を呼び出すか無名関数への参照を全て削除すれば、変数の消費するメモリが解放されるようになります。ですので、忘れずにそれを行い、使用されていないメモリが JavaScript エンジンによって効率的に解放されるようにして下さい。

ブラウザ実装状況

{{ CompatibilityTable() }}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 {{ CompatGeckoDesktop(1.0) }} 9.0 7 1.0
useCapture made optional 1.0 6.0 9.0 11.60 {{ CompatVersionUnknown }}
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 {{ CompatGeckoMobile(1.0) }} 9.0 6.0 1.0

Gecko に関する注記

  • Prior to Firefox 6, the browser would throw if the useCapture parameter was not explicitly false. Prior to Gecko 9.0 {{ geckoRelease("9.0") }}, addEventListener() would throw an exception if the listener parameter was null; now the method returns without error, but without doing anything.

WebKit に関する注記

  • Although WebKit has explicitly added [optional] to the useCapture parameter fairly recently, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.

仕様書

関連情報

このリビジョンのソースコード

<div>
  {{DomRef}} {{translationinprogress}}</div>
<!-- 表現、用語に難を残す。 --><!-- 要アップデート
https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener#Memory_issues
   https://developer.mozilla.org/ja/docs/DOM/element.addEventListener#Memory_issues
-->
<h2 id="Summary" name="Summary">概要</h2>
<p><code>addEventListener</code> は、一つのイベントターゲットにイベントリスナーを一つ登録します。イベントターゲットは、ドキュメント上の単一のノード、<a href="/ja/docs/DOM/document" title="DOM/document">ドキュメント</a>自身、<a href="/ja/docs/DOM/window" title="DOM/window">ウィンドウ</a>、あるいは、<a href="/ja/docs/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> です。</p>
<p>ターゲットに対して 二つ以上のイベントリスナーを登録するには、同じターゲットに対して、異なるイベントタイプ、あるいは、キャプチャパラメータを指定して <code>addEventListener()</code> を呼び出します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">
<code><em>target</em>.addEventListener(<em>type</em>, <em>listener</em>, <em>useCapture</em>);
<em>target</em>.addEventListener(<em>type</em>, <em>listener</em>, <em>useCapture</em> [, <em>aWantsUntrusted </em>{{ Non-standard_inline }}<em>]</em> ); // Mozilla only</code></pre>
<dl>
  <dt>
    type</dt>
  <dd>
    リスニングする<a href="/ja/docs/DOM/event.type" title="DOM/event.type">イベントタイプ</a>を表す文字列</dd>
  <dt>
    listener</dt>
  <dd>
    指定されたタイプのイベントが発生するときに通知を受け取るオブジェクト。これは、<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a> インターフェースで実装されたオブジェクト、あるいは、単純に、JavaScript の <a href="/ja/docs/JavaScript/Guide/Functions" title="Core_JavaScript_1.5_Guide/Functions">関数</a>でなければなりません。</dd>
  <dt>
    useCapture</dt>
  <dd>
    <code>true</code> の場合、<code>useCapture</code> は、ユーザがキャプチャを開始したいことを示しています。キャプチャの開始後、指定されたタイプのイベントの全てが、まず、登録された <code>listener</code> にディスパッチされ、その後、DOM ツリーにおいてその下に位置する任意の <code>EventTarget</code> にディスパッチされます。ツリーをたどって上方へバブリングするイベントは、キャプチャを用いるように指定されたリスナーを誘発することはありません。詳細については、<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow">DOM Level 3 Events</a> を参照してください。</dd>
  <dt>
    aWantsUntrusted {{ Non-standard_inline() }}</dt>
  <dd>
    <code>true</code> の場合、信頼されないコンテンツによって引き起こされるイベントを許可します。<a href="/ja/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">特権ページと非特権ページの間のやり取り</a>を参照してください。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<pre class="brush:html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;DOM Event Example&lt;/title&gt;

&lt;style&gt;
#t { border: 1px solid red }
#t1 { background-color: pink }
&lt;/style&gt;

&lt;script&gt;

// t2 の内容を変更する関数
function modifyText() {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = "three";
}
 
// t にイベントリスナーを追加する関数
function load() {
  var el = document.getElementById("t");
  el.addEventListener("click", modifyText, false);
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="load();"&gt;

&lt;table id="t"&gt;
  &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
<p>{{ JSFiddleLink("madBYK/UumUP") }}</p>
<p>上記の例では、<code>modifyText()</code> が <code>addEventListener()</code> を用いて登録された <code>click</code> イベントのリスナーになっています。table 中のどこをクリックしても、そのハンドラまでバブルし、<code>modifyText()</code> が実行されます。</p>
<p>{{yakuchu('「バブリング(バブルアップ、または単にバブルと呼ばれる事もある)」は リスナーの上位ノードへの伝播を表す用語として用いられます。仕様書内でも "Bubbling" という用語が定義されています')}} (<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-overview-terminology">仕様書: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-overview-terminology</a>)</p>
<h2 id="Notes" name="Notes">注記</h2>
<h3 id="Why_use_addEventListener.3F" name="Why_use_addEventListener.3F">なぜ、<code>addEventListener</code> を使うのですか?</h3>
<p><code>addEventListener</code> は、W3C DOM で仕様化された、イベントリスナーを登録するための方法です。その利点は以下の通りです。</p>
<ul>
  <li>イベントに 1 つ以上のハンドラを追加することができます。これは、特に、他のライブラリ/拡張で利用しても上手く動作する必要がある <a href="/ja/docs/DHTML" title="DHTML">DHTML</a> ライブラリや <a href="/ja/docs/Extensions" title="Extensions">Mozilla の拡張</a> のために役立ちます。</li>
  <li>リスナーが活性化されたときに、その動きを細かくコントールすることを可能にします(キャプチャリング 対 バブリング)。</li>
  <li>HTML 要素だけでなく、任意の DOM 要素 で動作します。</li>
</ul>
<p>もうひとつの方法である、<a href="#Older_way_to_register_event_listeners">イベントリスナーを登録するための古い方法</a> は、後で説明します。</p>
<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">イベントディスパッチ中のリスナーの追加</h3>
<p><code>EventListener</code> が、イベント処理中に <code>EventTarget</code> に追加された場合、それが現在のアクションによって実行されることはありませんが、バブリングフェーズのように、イベントフローの後の段階中に実行されるかもしれません。</p>
<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">複数の同一のイベントリスナー</h3>
<p>複数の同一の <code>EventListener</code> が、同じ <code>EventTarget</code> に同じ引数で登録された場合、重複するインスタンスは反映されません。<code>EventListener</code> が 2 度呼び出されることはなく、重複するインスタンスは反映されないので、<a href="/ja/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a> で手動で削除する必要はありません。</p>
<h3 id="The_value_of_this_within_the_handler" name="The_value_of_this_within_the_handler">ハンドラ内での <code>this</code> の値</h3>
<p>一連の類似した要素に対して一般的なハンドラを用いたいというような、イベントハンドラが実行される要素を参照したいということがたびたびあります。 <code>addEventListener()</code> に渡す関数で <code>this</code> という値を用いるようにすることで、そのように変更することができます。<code>this</code> の値は、呼び出し元から関数に渡されることに注意してください。</p>
<p>上記の例では、クリックイベントから呼び出されたときの <code>modifyText()</code> 内の <code>this</code> の値は、table 't' への参照となります。これは、HTML ソースに追加された場合に起こる振る舞いとは異なります。:</p>
<pre class="brush:html">
&lt;table id="t" onclick="modifyText();"&gt;
. . .</pre>
<p>onclick イベントで呼び出されたときの <code>modifyText()</code> 内の <code>this</code> の値は、グローバル(window)オブジェクトへの参照となります。</p>
<div class="note">
  <strong>注:</strong> JavaScript 1.8.5 で <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> メソッドが導入されました。これは呼び出す関数内で <code>this</code> に相当する値を指定できるものです。これを使えば、関数がどこから呼び出されるかによって <code>this</code> の値が変わってしまうというややこしい問題を簡単に回避できます。ただし、リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります。</div>
<p>以下は <code>bind</code> を使った場合と使わない場合の例です。</p>
<pre class="brush: js">
var Something = function(element)
{
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // this は element なので undefined になります
  };
  this.onclick2 = function(event) {
    console.log(this.name); // this はバインドされた Something オブジェクトなので「Something Good」と出力されます
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // これが仕掛けです
}
</pre>
<p>上の例の問題は、<code>bind</code> の付いたリスナーを削除できないということです。もうひとつの解決策は、あらゆるイベントを補足できる <code>handleEvent</code> という特別な関数を使用することです。</p>
<pre class="brush: js">
var Something = function(element)
{
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // this は Something オブジェクトなので「Something Good」と出力されます
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };

  // この場合のリスナーは this であって this.handleEvent でないことに注意してください
  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);

  // リスナーは適切に削除できます
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}
</pre>
<h3 id="Internet_Explorer" name="Internet_Explorer">Internet Explorer</h3>
<p>IE では、標準の <code>addEventListener</code> ではなく、 <code>attachEvent</code> を使わなければなりません。IE をサポートするためには、上記の例を以下のように修正しなけれなりません。</p>
<pre class="brush: js">
if (el.addEventListener){
  el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}</pre>
<p><code>attachEvent</code> の欠点が一つあります。<code>this</code> の値がイベントを起こした要素ではなく、<code>window</code> オブジェクトへの参照になってしまうことです。</p>
<h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">イベントリスナーを登録するための古い方法</h3>
<p><code>addEventListener()</code> は、DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> 仕様で導入されました。それ以前は、以下のようにイベントリスナーを登録していました。</p>
<pre class="brush: js">
// 関数へのリファレンスを利用する方法—'()' が無いことに注意していください
el.onclick = modifyText;

// 関数式を利用する方法
element.onclick = function() {
   /* ...文... */
};</pre>
<p>このメソッドは、要素上に <code>click</code> イベントリスナーが既に存在する場合、置き換えてしまいます。<br />
  {{yakuchu("これはつまり、既に要素に対し定義されたハンドラに対し更にイベントを追加しようとする場合に、以前のイベントを含める形で上書きしなければならない事を意味します。")}}<br />
  他のイベント、<code>blur</code> (<code>onblur</code>)、<code>keypress</code> (<code>onkeypress</code>)、などのような関連するイベントハンドラも同様です。</p>
<p>これは本質的には DOM 0 の一部分なので、この方法は、非常に広くサポートされており、特別なクロスブラウザ用のコードも必要ありません。それ故、<code>addEventListener()</code> の独自の機能が必要でない場合に、動的にイベントリスナーを登録する方法として普通に使われています。</p>
<h3 id="Memory_issues" name="Memory_issues">メモリに関する問題</h3>
<p>メモリ使用量が増大する問題を引き起こす方法に共通しているのは、オブジェクトのメソッドをコールバック関数として渡すことです。</p>
<pre class="brush:js">
setTimeout(obj.func, 1000);	// |this| が間違って設定される !
document.addEventListener("load", obj.func, false);	// |this| が間違って設定される !</pre>
<p>単純な回避策としては、無名関数をコールバックとして渡す方法があります。</p>
<pre class="brush:js">
document.addEventListener("load", function(event) { obj.func(event); }, false);</pre>
<p>注意すべきなのは、この無名関数はそれを内包する環境にある<em>全ての</em>変数にアクセスすることができ、それらの変数が使用するメモリは、その無名関数が使われる可能性がある限りは (つまりイベントリスナが登録されている限りは) JavaScript エンジンによって解放されないということです。この関数に対して維持される必要があるのは実際には <code>obj</code> だけなのに、JavaScript エンジンは他の変数も維持する事を選択し、その結果メモリの負荷が増大します。<code>removeEventListener</code> を呼び出すか無名関数への参照を全て削除すれば、変数の消費するメモリが解放されるようになります。ですので、忘れずにそれを行い、使用されていないメモリが JavaScript エンジンによって効率的に解放されるようにして下さい。</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザ実装状況</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop(1.0) }}</td>
        <td>9.0</td>
        <td>7</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td><code>useCapture</code> made optional</td>
        <td>1.0</td>
        <td>6.0</td>
        <td>9.0</td>
        <td>11.60</td>
        <td>{{ CompatVersionUnknown }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile(1.0) }}</td>
        <td>9.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h4 id="Gecko_notes" name="Gecko_notes">Gecko に関する注記</h4>
<ul>
  <li>Prior to Firefox 6, the browser would throw if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> would throw an exception if the <code>listener</code> parameter was <code>null</code>; now the method returns without error, but without doing anything.</li>
</ul>
<h4 id="WebKit_notes" name="WebKit_notes">WebKit に関する注記</h4>
<ul>
  <li>Although WebKit has explicitly added <code>[optional]</code> to the <code>useCapture</code> parameter <a href="http://trac.webkit.org/changeset/89781">fairly recently</a>, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.</li>
</ul>
<h2 id="Specification" name="Specification">仕様書</h2>
<ul>
  <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: addEventListener</a></li>
  <li><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener">DOM Level 3 Events: EventTarget.addEventListener</a></li>
</ul>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li><a href="/ja/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener()</a></li>
  <li><a href="/ja/docs/DOM/Creating_and_triggering_events" title="DOM/Creating_and_triggering_custom_events">Creating and triggering custom events</a></li>
  <li><a href="http://www.quirksmode.org/js/this.html" title="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
</ul>
Revert to this revision