menu
menu

キーワード検索

 

前月(4月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  4. (10 ↑) 【Mac】MacにInkscapeをインストール
  5. ( 5 - ) 【HTML5】スマホサイトの作成・基本編
  6. ( 8 ↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 6 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 4 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直して...
  9. ( - ↑) 【jQuery】jQueryでドロップダウンメニュー
  10. ( - ↑) 【CSS】スマホサイト向け横にスクロールするナビゲーション
このエントリーをはてなブックマークに追加

【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()のアラートは表示されませんでした。

 

にほんブログ村 IT技術ブログ JavaScriptへ

関連リンク

JavaScript入門
jQuery入門

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