イベントの追加
イベントを追加するには、addEventListenerメソッド（IE8以下の場合はattachEventメソッド）を使用します。
構文
element.addEventListener(type, listener[, use capture]);IE
element.attachEvent(type, listener);引数
| 引数名 | 初期値 | 型 | 説明 |
|---|---|---|---|
| type 必須 |
string | 追加するイベント名 | |
| listener 必須 |
function | 追加する機能（関数） | |
| use capture | false | boolean | 捕捉フェーズを使用するかどうかを示す |
なおattachEventの場合、listener内で使用されるthisは自分自身ではなくwindowオブジェクトになります。
自分自身を得るには、引数のオブジェクトにあるsrcElementプロパティで取得します。
サンプルコード
JavaScript
var sampleElement = document.getElementById('sample');
sampleElement.addEventListener('click', function(event) {
alert(this.tagName);
});
// IEの場合
sampleElement.attachEvent('click', function(event) {
var self = (event.srcElement) ? event.srcElement : this;
alert(self.tagName);
});共通関数としての定義
分岐処理をした関数を用意することで、addEventListenerとattachEventの両方を別で書かずにすむようになります。
関数定義
JavaScript
var addEvent = (function() {
if (window.addEventListener) {
return function(element, type, handler) {
// other
element.addEventListener(type, handler, false);
return element;
};
} else if (window.attachEvent) {
return function(element, type, handler) {
// IE
element.attachEvent('on' + type, handler);
return element;
};
} else {
return function(element) {
return element;
};
}
})();使い方
第一引数にエレメント（ノード）、第二引数にイベント名、第三引数にfunctionを指定します。
JavaScript
var onLoadHandle = function() {
alert('onload');
};
// addEventListener(オブジェクト, タイプ, 実行function);
addEvent(window, 'load', onLoadHandle);