イベントオブジェクトのメソッド
イベントモデルについては自習室 » イベントモデル をご覧ください
イベントオブジェクト
イベントが発生した時に、イベントハンドラに引数で渡されるオブジェクトがイベントオブジェクトです。
// クリックした時に呼ばれて、引数にはクリックイベントのイベントオブジェクトが渡される
});
// --------------------------
// jQueryを使用した場合
// --------------------------
$('#testbtn').bind('click', function(jQueryEvent){
// クリックした時に呼ばれて、引数にはjQueryイベントオブジェクトが渡される
// オリジナルのイベントオブジェクトは、jQueryEvent.originalEventに格納されている。
// jQueryイベントオブジェクトもオリジナルイベントが持つメソッド(preventDefault(),stopPropagation()等)を持つ
});
// --------------------------
// hifiveを使用した場合
// --------------------------
var bodyController = {
__name: 'sample.BodyController',
'#testbtn click': function(context, $el) {
// context.eventに、jQueryEventオブジェクトが格納されている
}
};
h5.core.controller('body', bodyController);
注：jQueryEventオブジェクトからイベントのメソッドを呼ぶと、jQuery内部でオリジナルのイベントオブジェクトの対応するメソッドを呼んでいます。そのため、メソッドの動作については、オリジナルイベントオブジェクトもjQueryイベントオブジェクトも同じです。
preventDefault()
イベントが実行されたときに、そのイベントについてのデフォルトの動作を阻止します。
例えばa要素がクリックされた時は、href属性の値へページ遷移するのがデフォルトの動作ですが、preventDefault()を呼ぶとページ遷移をさせないようにできます。
'a click': function(context){
context.event.preventDefault();
// preventDefault()を読んだので、a要素クリックによる画面遷移は行われない
},
'form submit': function(context) {
context.event.preventDefault();
// preventDefault()を呼んだので、formのsubmitによるフォームの送信(画面遷移)は行われない
},
'{body} click': function(context) {
// 伝播して呼ばれたイベントハンドラでpreventDefault()を呼んだ場合もデフォルトの動作を阻止できる
// a要素のクリックや、フォームのサブミットボタンのクリックをしても画面遷移は行われない
context.event.preventDefault();
}
stopPropagation() と stopImmediatePropagation()
どちらもイベントの伝播をストップします。stopImmediatePropagation()は現行の要素のイベントハンドラの実行もストップします。
<div class="parent">
<div class="child"></div>
</div>
</body>
__name: 'AController',
'.parent .child click': function(context){
console.log('AController .child click');
// 伝播をストップ
// context.event.stopPropagation(); ・・・【1】
// context.event.stopImmediatePropagation(); ・・・【2】
},
'.parent click': function(context){
console.log('AController .parent click');
}
};
h5.core.controller('body',aController);
var bController = {
__name: 'BController',
'.parent .child click': function(context){
console.log('BController .child click');
},
'.parent click': function(context){
console.log('BController .parent click');
}
});
h5.core.controller('body',bController);
.parentの子要素.child要素をクリックした時、イベントが伝播する場合(stopPropagation()もstopImmediatePropagation()も呼ばない場合)は、以下の順番で実行されます。
- AController .child click
- BController .child click
- AController .parent click
- BController .parent click
stopPropagation()を使った場合、親要素へのイベントの伝播はしません。ただしストップされるまでに伝播された要素についてのイベントハンドラは実行されます。この例では.child要素のイベントハンドラはすべて実行されます。
【1】を有効化して、stopPropagation()を使った場合は以下の順番でハンドラが実行されます。
- AController .child click
- BController .child click
stopImmediatePropagation()を使った場合、親要素へのイベントの伝播はしません。また、親要素だけでなく、同一要素についても、stopImmediatePropagation()が呼ばれた時点でまだ呼ばれていないイベントハンドラは実行されません。この例では、AControllerで.child要素のclickにバインドしたイベントハンドラでstopImmediatePropagation()を呼ぶと、その後に呼ばれるはずだったBControllerで.child要素のclickにバインドしたハンドラも呼ばれなくなります。
【2】を有効化して、stopImmediatePropagation()を使った場合は以下の順番でハンドラが実行されます。
- AController .child click
isDefaultPrevented()
jQueryイベント限定のメソッドです。オリジナルのイベントメソッドにはありません。
既にpreventDefault()が呼ばれたかどうかを判定します。preventDefault()が呼ばれていたらtrue、呼ばれていなければfalseを返します。
context.event.isDefaultPrevented(); // false preventDefault()は呼ばれていない
// .wrapper内のa要素をクリックした時のハンドラで、preventDefault()を呼ぶ
context.event.preventDefault();
context.event.isDefaultPrevented(); // true preventDefault()が呼ばれている
},
'.wrapper click': function(context) {
context.event.isDefaultPrevented(); // '.wrapper click'に伝播するまでにpreventDefault()が呼ばれていた場合はtrue
}
isPropagationStopped()
jQueryイベント限定のメソッドです。オリジナルのイベントメソッドにはありません。
既にstopPropagation()が呼ばれたかどうかを判定します。stopPropagation()が呼ばれていたらtrue、呼ばれていなければfalseを返します。
context.event.isPropagationStopped(); // false stopPropagation()は呼ばれていない
context.event.stopPropagation();
context.event.isPropagationStopped(); // true stopPropagation()が呼ばれている
}
isImmediatePropagationStopped()
jQueryイベント限定のメソッドです。オリジナルのイベントメソッドにはありません。
既にstopImmediatePropagation()が呼ばれたかどうかを判定します。stopImmediatePropagation()が呼ばれていたらtrue、呼ばれていなければfalseを返します。
context.event.isImmediatePropagationStopped(); // false stopImmediatePropagation()は呼ばれていない
context.event.stopImmediatePropagation();
context.event.isImmediatePropagationStopped(); // true stopImmediatePropagation()が呼ばれている
}
イベントハンドラで return false した時の動作
イベントハンドラがfalseを返した時の挙動は、jQueryを使用した場合とそうでない場合で挙動が異なります。
jQueryでない場合
return falseをすると、デフォルトの動作が阻止されます。event.preventDefault()が呼ばれた時と同じようになります。
<div id="outer">
<a id="inner" href="www.htmlhifive.com">hifive</a>
</div>
document.getELementById('outer').addEventListener('click', function(){
alert('outer click');
});
document.getElementById('inner').addEventListener('click', function(){
alert('inner click');
return false;
});
上のようにイベントハンドラが記述されているときにa要素をクリックすると、以下のような挙動になります。
- 'inner click' とアラートが出る(リンク先へはジャンプしない)
- 'outer click' とアラートが出る
jQueryの場合
return falseをすると、デフォルトの動作が阻止され、イベントの伝播もストップします。event.preventDefault()と、event.stopPropagation()の両方が呼ばれた時と同じようになります。
alert('outer click');
});
$('#inner').bind('click', function(){
alert('inner click');
return false;
});
上のようにイベントハンドラが記述されているときにa要素をクリックすると、以下のような挙動になります。
- 'inner click' とアラートが出る(リンク先へはジャンプしない)
※hifiveの場合は、return falseをしても何も起きません。そのため、preventDefaultやstopPropagationは明示的に呼ぶ必要があります。