構文
  
　要素.addEventListener( "イベント・タイプ", 処理,ユーザー・キャプチャ ) 　[メソッド]
イベントタイプ
  
　リスニングするイベント・タイプ
総合 インデックス
メソッド
FirefoxIE

説明

  • 　指定したイベント・ターゲットに対し，取得するイベント・タイプや処理などの設定を行うメソッド。イベント・ターゲットは，ドキュメント上の各ノード，ドキュメント自身，ウインドウあるいはXMLHttpRequestなどとなる。HTML要素内に設定したイベント・ハンドラは，DOMのツリー構造に沿って参照される。
  • 　しかし　「addEventListener」メソッドで設定したイベントは，DOMのツリー構造に関係なく，直接参照される。
  • 　「addEventListener」メソッドに設定する値のうち，「イベントタイプ」は取得できるようにするイベントのタイプを，「処理」はイベントが発生した時に呼ばれるユーザーが設定したスクリプトや関数などの処理を，「ユーザー・キャプチャ 」は，ユーザーがイベントの取得を開始するかどうかを，「true」か「false」でそれぞれ設定する。「addEventListener」メソッドは，W3C DOMで仕様化されたイベント・リスナーを登録するための方法となる。イベント・ハンドラと比べて「addEventListener」メソッドには，1つのイベントに対し複数のハンドラを追加できる，イベント・リスナーが活性化されたとき，その動きを細かくコントロールできるHTML要素だけでなく，任意のDOM要素で動作させることができるなどの利点がある。
  • 　用例では，id名「p1」のp要素に対し，クリックのイベントをリスニングし，イベント取得時には，関数「MyFunc」を発生するようにしている。関数「MyFunc」の処理では，id名「IMG」のimg要素のsrc属性に値を設定することにより，画像の置き換えを行っている。
  • 　Opera，Safari，Chromeも対応している。Internet Explorerでは未対応。Internet Explorerには，同等の機能を持つ「attachEvent」メソッドがある。

用例

「addEventListener」メソッドを使って，id名「p1」を設定したp要素で「click」イベントが発生した時，関数「MyFunc」の処理を実行するよう設定を行う。
<html> <head>
 <mata http-equiv="Content-Script-Type" content="text/javascript">
<mata http-equiv="Content-Style-Type" content="text/css">
 <title>addEventListener</title> 
<script type="text/javascript">
<!--
 function MyFunc() { 
    document.getElementById("IMG").src = "image2.jpg"; 
} 
function load() { 
    el = document.getElementById("p1"); 
    el.addEventListener("click", MyFunc, true); 
 } 
// -->
</script> 
<style type="text/css">
<!--
body { background-color: #ffffff }
#p1 { background-color: pink; width:150 } 
-->
 </style> 
</head> 
<body onload="load()"> 
*イベント・リスナーの登録やイベント発生時の処理を設定する(Firefox)
<p>
<img src="image1.jpg" id="IMG" width="100" height="100"
 alt="addEventListener">
</p>
<p id="p1"> 
ここをクリックすると上の画像が変わります
</p>
</body> </html>

この用例を実行する