menu
menu

キーワード検索

 

前月(4月)の人気記事トップ10 - 5/1/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
  6. (圏外↑) 【決定版】フォントの設定はこれで決まり❗️
  7. (圏外↑) 【Mac】iMovieの保存場所を変更する
  8. (圏外↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  9. ( 5 ↓) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 9 ↓) 【制作Tips】iPad画面解像度まとめ
このエントリーをはてなブックマークに追加

【JavaScript】addEventListenerの基本的な書き方

【JavaScript】addEventListenerの基本的な書き方

addEventListener

JavaScriptのイベントはページが読み込まれたりボタンをクリックしたりカーソルが要素の上に乗ったなどといった時に発生しますが、それらのイベント処理をaddEventListenerで発生させます。

addEventListenerの記述方法

obj.addEventListener(イベントタイプ, 関数, オプション);

addEventListenerの引数は3つあり、第1引数に指定したイベントによって第2引数で指定した関数が実行されます。

  1. 第1引数はイベントタイプを指定。ロードイベントやクリックイベントなど。ここで指定するイベントタイプはイベントハンドラの書き方とは少し違いますので書き方には注意してください。【JavaScript】入門2. イベント処理
  2. 第2引数ではイベントを発生させる関数を指定。
  3. 第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()のアラートは表示されませんでした。


関連リンク

JavaScript入門
jQuery入門

  • addEventListener JavaScript removeEventListener
このエントリーをはてなブックマークに追加