PR
構文
 
 要素.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>

この用例を実行する