イベントリスナー設定方法 : JavaScript
イベントリスナーについての覚書。
イベントリスナーの設定はFirefoxはddEventListener、IEはattachEvent関数を利用します。
目次
Firefoxのイベントリスナー設定(addEventListener)
addEventListener(evType, callback, useCapture)
evType :
リスナーで受け取るイベントの種類を指定します。
onclick ⇒ click
onmouseover ⇒ mouseover
onmouseout ⇒ mouseout
callback
リスナーとして登録するコールバック関数です。 コールバック関数に引数を指定して呼び出すことはできません。
しかしイベントが発生するとJavaScriptはコールバック関数に引数としてイベントオブジェクト[1]を自動的に渡します。
コールバック関数で引数を定義することにより渡されたイベントオブジェクトをコールバック関数で利用できます。
function func(e) {
e.処理 // イベント情報の処理
}
1. ここで言うイベントオブジェクトはwindow.eventオブジェクトとは異なります。
useCapture
イベント処理をキャプチャフェースで行うかバブリングフェースで行うのかを指定します。
useCaptureのサンプルコード
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var parent = document.getElementById('parent');
var child = document.getElementById('child');
var parentfunc = function () {
alert('Click Parent');
}
var childfunc = function(){
alert('Click Child');
}
// イベントリスナー設定
var useCapture = false;
parent.addEventListener('click', parentfunc, useCapture);
child.addEventListener('click', childfunc, useCapture);
}
</script>
</head>
<body>
<div id="parent">
Parent Area
<span id="child">Child Area</span>
</div>
</body>
</html>
useCaptureをtureに設定すると、イベントが親要素から順に降りていくキャプチャフェースでキャッチされます。falseに設定すると子要素から順に昇って行くバブリングフェースでキャッチされます。
useCaptureについては次のサイトで分かりやすく説明されています。
» JavaScript addEventListener() - とみぞーノート
IEのイベントリスナー設定(attachEvent)
[js]attachEvent(evType,callback);[/js]
evType
'onclick'、'onmouseover'などのイベントタイプを指定する。
addEventListnerとは異なり先頭のonは省略しません。
リスナーとして登録するコールバック関数です。 コールバック関数に引数を指定して呼び出すことはできません。
しかしイベントが発生するとJavaScriptはコールバック関数に引数としてイベントオブジェクト[1]を自動的に渡します。
コールバック関数で引数を定義することにより渡されたイベントオブジェクトをコールバック関数で利用できます。
var callback = function (e) {
e.処理 // イベント情報の処理
}
1. ここで言うイベントオブジェクトはwindow.eventオブジェクトとは異なります。
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。