構文 |
|
| 要素.removeEventListener( "イベント・タイプ", 処理,ユーザー・キャプチャ ) [メソッド] |
イベント・タイプ |
|
| 削除するイベント・タイプ |
|
|
説明
- 指定した要素に対し，リスニング中のイベントの中止を行うメソッド。「removeEventListener」メソッドに設定する値のうち，「イベントタイプ」は削除するイベントのタイプを，「処理」は削除するイベントが発生した時に呼ばれるスクリプトや関数などの処理を，「ユーザー・キャプチャ 」はユーザーがイベント処理を開始するかどうかを，「true」か「false」でそれぞれ設定する。
- 用例では，「removeEventListener」メソッドの設定により「click」イベントのリスニングを行っているid名「p1」のp要素がクリックされた時，関数「MyFunc」を発生させる処理を，「removeEventListener」メソッドを使って削除している。「removeEventListener」メソッドの処理は，id名「p2」のp要素をクリックした時に発生する。
- Opera，Safari，Chromeでも対応している。Internet Explorerでは未対応。
用例
id名「p2」を設定したp要素をクリックした時，「addEventListener」メソッドを使って設定した，id名「p1」を設定したp要素に対するイベント・リスナーの設定を削除する。
<html><head>
<mata http-equiv="Content-Script-Type" content="text/javascript">
<mata http-equiv="Content-Style-Type" content="text/css">
<title>removeEventListener</title>
<script type="text/javascript">
<!--
function MyFunc() {
document.getElementById("IMG").src = "image2.jpg";
}
function MyFunc_2() {
el = document.getElementById("p1");
el.removeEventListener("click", MyFunc, false);
}
function load() {
el = document.getElementById("p1");
el.addEventListener("click", MyFunc, false);
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff }
#p1 {
border: 2px solid red;
background-color: pink; width:250;
}
#p2 {
border: 2px solid tan;
background-color: pink; width:250;
}
-->
</style>
</head>
<body onLoad="load()">
*指定した要素からイベント・リスナーを削除する
<p>
<img src="image1.jpg" id="IMG" width="100" height="100" alt="border">
</p>
<p id="p1">
ここをクリックするとイベントが発生します。
</p>
<p id="p2" onClick="MyFunc_2()">
でもその前にここをクリックするとイベントが発生しません。
</p>
</body></html>
この用例を実行する
