attachEvent
イベントの登録やイベント発生時の処理を設定する(Internet Explorer)
構文 |
|
要素.attachEvent( "イベント・タイプ", 処理,ユーザー・キャプチャ ) [メソッド] |
イベント・タイプ |
|
リスニングするイベント・タイプ |
|
|
説明
- 指定したイベント・ターゲットに対し,取得するイベント・タイプや処理などの設定を行うメソッド。イベント・ターゲットは,ドキュメント上の各ノード,ドキュメント自身,ウインドウあるいはXMLHttpRequestなどとなる。HTML要素内に設定したイベント・ハンドラは,DOMのツリー構造に沿って参照される。
- しかし「attachEvent」メソッドで設定したイベントは,DOMのツリー構造に関係なく,直接参照される。「attachEvent」メソッドに設定する値のうち,「イベント・タイプ」は,取得できるようにするイベントのタイプを,「処理」はイベントが発生した時に呼ばれるユーザーが設定したスクリプトや関数などの処理を,「ユーザー・キャプチャ 」はユーザーがイベントの取得を開始するかどうかを,「true」か「false」でそれぞれ設定する。
- 用例では,id名「p1」のp要素に対し,クリックのイベントをリスニングし,イベント取得時には,関数「MyFunc」を発生するようにしている。関数「MyFunc」の処理では,id名「IMG」のimg要素のsrc属性に値を設定することにより,画像の置き換えを行っている。
- OperaとSafariでも対応している。FirefoxやNetscapeなどのMozilla系ブラウザでは未対応。Firefoxには,同等の機能を持つ「addEventListener」メソッドがある。
用例
「attachEvent」メソッドを使って,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>attachEvent</title>
<script type="text/javascript">
<!--
function MyFunc() {
document.getElementById("IMG").src = "image2.jpg";
}
function load() {
el = document.getElementById("p1");
el.attachEvent("onclick", MyFunc, true);
}
// -->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff }
#p1 { background-color: pink; width:150 }
-->
</style>
</head>
<body onload="load()">
*イベントや処理を設定する(Internet Explorer)
<p>
<img src="image1.jpg" id="IMG" width="100" height="100" alt="addEventListener">
</p>
<p id="p1">
ここをクリックすると上の画像が変わります
</p>
</body> </html>
この用例を実行する