12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【JavaScript】addEventListenerの基本的な書き方
addEventListener
JavaScriptのイベントはページが読み込まれたりボタンをクリックしたりカーソルが要素の上に乗ったなどといった時に発生しますが、それらのイベント処理をaddEventListenerで発生させます。
addEventListenerの記述方法
obj.addEventListener(イベントタイプ, 関数, オプション);
addEventListenerの引数は3つあり、第1引数に指定したイベントによって第2引数で指定した関数が実行されます。
- 第1引数はイベントタイプを指定。ロードイベントやクリックイベントなど。ここで指定するイベントタイプはイベントハンドラの書き方とは少し違いますので書き方には注意してください。【JavaScript】入門2. イベント処理
- 第2引数ではイベントを発生させる関数を指定。
- 第3引数では「キャプチャリングフェーズ」 or 「バブリングフェーズ」のどちらでイベントを実行させるのかを真偽値で指定。初期値は「false」で「バブリングフェーズ」で実行されます。省略すると「false」と見なされます。
JavaScript
function hoge1(){
alert('whats up!');
}
function hoge2(){
alert('Just chilling!');
}
var e = document.getElementById('sample1');
e.addEventListener('click', hoge1, false);
e.addEventListener('click', hoge2, false);
click!をクリックすると関数hoge1()とhoge2()が実行されます。
Result
click
removeEventListenerの記述方法
addEventListenerと逆の「removeEventListener」というメソッドもあります。addEventListenerと同じく引数も3つあり、第1引数に指定したイベントによって第2引数で指定した関数が実行され、登録されているイベントをなくします。
obj.removeEventListener(イベントタイプ, 関数, オプション);
注意点として、二つ目の引数はaddEventListenerに渡した引数と同じ関数式である必要があります。
JavaScript
function hoge3(){
alert('pront!');
}
var e = document.getElementById('sample2');
e.addEventListener('click', hoge3, false);
e.removeEventListener('click', hoge3, false);
click!をクリックすると関数hoge3()が実行されます。
Result
click
addEventListenerの直後にremoveEventListenerが実行されたためのhoge3()のアラートは表示されませんでした。