EventTarget.addEventListener

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

このリビジョンの内容

{{DomRef}}

概要

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

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

構文

target.addEventListener(type, listener [, useCapture]);
target.addEventListener(type, listener [, useCapture, aWantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only
注記: useCapture は、主要なブラウザの最近のバージョンでのみ省略可能です。例えば、Firefox 6 より前では省略できません。幅広い互換性を保つために、引数を省略すべきではありません。
type
対象とするイベントの種類を表す文字列
listener
指定されたタイプのイベントが発生するときに通知を受け取るオブジェクト。これは、EventListener インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の 関数でなければなりません。
useCapture {{optional_inline}}
捕捉フェーズを使用する場合は、 useCapturetrue を指定します。捕捉フェーズの開始後、指定されたタイプのイベントの全てが、まず、登録された listener に{{訳語("発送", "dispatch")}}され、その後、DOM ツリーにおいてその下に位置する任意の EventTarget に{{訳語("発送", "dispatch")}}されます。ツリーをたどって上方へ{{訳語("浮上", "bubbling")}}するイベントは、捕捉フェーズを用いるように指定されたリスナーを誘発することはありません。詳細については、DOM Level 3 Events を参照してください。この引数は、全てのブラウザで省略可能ではないことに注意してください。省略した場合、 useCapturefalse となります。
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);
}

document.addEventListener("DOMContentLoaded", load, false);
</script>
</head>
<body>

<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 中のどこをクリックしても、そのハンドラまで{{訳語("浮上", "bubble")}}し、modifyText() が実行されます。

リスナー関数に引数を渡す場合は、関数式を使う必要があります。

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

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

<script>

// Function to change the content of t2
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// Function to add event listener to t
function load() { 
  var el = document.getElementById("t"); 
  el.addEventListener("click", function(){modifyText("four")}, 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>

注記

なぜ、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':
        // 処理
        break;
      case 'dblclick':
        // 処理
        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 と attachEvent

IE9 より前の Internet Explorer では、標準の 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() の独自の機能が必要でない場合に、動的にイベントリスナーを登録する方法として普通に使われています。

メモリに関する問題

var i;
var els = document.getElementsByTagName('*');

// Case 1
for(i=0 ; i<els.length ; i++){
  els[i].addEventListener("click", function handler(e){/*関数の処理*/}, false);
}

// Case 2
function processEvent(e){
  /*関数の処理*/
}

for(i=0 ; i<els.length ; i++){
  els[i].addEventListener("click", processEvent, false);
}

最初の例では、新しい関数式がループごどに作られています。これに対して二番目の例では、前に宣言された同じ関数がイベントハンドラとして使われています。そのため、メモリの消費が抑えられます。

ブラウザ実装状況

{{CompatibilityTable}}
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 {{CompatGeckoDesktop(1.0)}} 9.0 7 1.0
useCapture 引数の省略 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 に関する注記

  • Firefox 6 より前では、 useCapture の引数を省略した場合、例外が発生します。Gecko 9.0 {{geckoRelease("9.0")}} より前では、 addEventListener() のリスナー引数が null の場合、例外が発生します。現在では例外は発生せず、何も処理をしません。

WebKit に関する注記

  • WebKit で useCapture 引数が明示的に省略可能となったのは、 2011年の6月 ですが、変更以前でも動作していました。この変更は、 Safari 5.1 と Chrome 13 から実装されます。

関連情報

仕様書

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

<div>
  {{DomRef}}</div>
<!-- 表現、用語に難を残す。 -->
<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}}]); // Gecko/Mozilla only</code></pre>
<div class="note">
  <strong>注記:</strong> <code>useCapture</code> は、主要なブラウザの最近のバージョンでのみ省略可能です。例えば、Firefox 6 より前では省略できません。幅広い互換性を保つために、引数を省略すべきではありません。</div>
<dl>
  <dt>
    <code>type</code></dt>
  <dd>
    対象とする<a href="/ja/docs/DOM/event.type" title="DOM/event.type">イベントの種類</a>を表す文字列</dd>
  <dt>
    <code>listener</code></dt>
  <dd>
    指定されたタイプのイベントが発生するときに通知を受け取るオブジェクト。これは、<a 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="JavaScript/Guide/Functions">関数</a>でなければなりません。</dd>
  <dt>
    <code>useCapture</code> {{optional_inline}}</dt>
  <dd>
    捕捉フェーズを使用する場合は、 <code>useCapture</code> に <code>true</code> を指定します。捕捉フェーズの開始後、指定されたタイプのイベントの全てが、まず、登録された <code>listener</code> に{{訳語("発送", "dispatch")}}され、その後、DOM ツリーにおいてその下に位置する任意の <code>EventTarget</code> に{{訳語("発送", "dispatch")}}されます。ツリーをたどって上方へ{{訳語("浮上", "bubbling")}}するイベントは、捕捉フェーズを用いるように指定されたリスナーを誘発することはありません。詳細については、<a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow">DOM Level 3 Events</a> を参照してください。この引数は、全てのブラウザで省略可能ではないことに注意してください。省略した場合、 <code>useCapture</code> は <code>false</code> となります。</dd>
  <dt>
    <code>aWantsUntrusted</code> {{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);
}

document.addEventListener("DOMContentLoaded", load, false);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&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 中のどこをクリックしても、そのハンドラまで{{訳語("浮上", "bubble")}}し、<code>modifyText()</code> が実行されます。</p>
<p>リスナー関数に引数を渡す場合は、関数式を使う必要があります。</p>
<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;

// Function to change the content of t2
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// Function to add event listener to t
function load() { 
  var el = document.getElementById("t"); 
  el.addEventListener("click", function(){modifyText("four")}, 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>
<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="/ja/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':
        // 処理
        break;
      case 'dblclick':
        // 処理
        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="Compatibility" name="Compatibility">古い Internet Explorer と attachEvent</h3>
<p>IE9 より前の Internet Explorer では、標準の <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 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>
<pre class="brush: js">
var i;
var els = document.getElementsByTagName('*');

// Case 1
for(i=0 ; i&lt;els.length ; i++){
  els[i].addEventListener("click", function handler(e){/*関数の処理*/}, false);
}

// Case 2
function processEvent(e){
  /*関数の処理*/
}

for(i=0 ; i&lt;els.length ; i++){
  els[i].addEventListener("click", processEvent, false);
}

</pre>
<p>最初の例では、新しい関数式がループごどに作られています。これに対して二番目の例では、前に宣言された同じ関数がイベントハンドラとして使われています。そのため、メモリの消費が抑えられます。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>
  {{CompatibilityTable}}</div>
<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> 引数の省略</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>


<h3 id="Gecko_notes" name="Gecko_notes">Gecko に関する注記</h3>
<ul>
  <li>Firefox 6 より前では、 <code>useCapture</code> の引数を省略した場合、例外が発生します。Gecko 9.0 {{geckoRelease("9.0")}} より前では、 <code>addEventListener()</code> のリスナー引数が <code>null</code> の場合、例外が発生します。現在では例外は発生せず、何も処理をしません。</li>
</ul>


<h3 id="WebKit_notes" name="WebKit_notes">WebKit に関する注記</h3>
<ul>
  <li>WebKit で <code>useCapture</code> 引数が明示的に省略可能となったのは、 <a href="http://trac.webkit.org/changeset/89781">2011年の6月</a> ですが、変更以前でも動作していました。この変更は、 Safari 5.1 と Chrome 13 から実装されます。</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>
<h2 id="Specification" name="Specification">仕様書</h2>
<ul>
  <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: EventTarget.addEventListener</a></li>
  <li><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener" title="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>
Revert to this revision