JavaScript でイベントリスナーを追加・削除する方法

イベントリスナーについて

ボタンのクリック等の特定の動作に対して JavaScript の処理を行う場合、HTMLからではイベントハンドラ方式(onclick 属性にその処理を指定する等)を利用することになりますが、この方法では1つのイベントに1つの処理しか行えません。(後から別の処理をその要素に設定すると上書きされます。)

こういった場合、JavaScript側でイベントを受け取り処理するイベントリスナー方式にすることで、1つのイベントに複数の処理を関連付けることが可能になります。

ということで今回は、処理を行う関数をイベントリスナーとして追加するメソッドについて記述しておくことにします。

イベント処理の追加 / .addEventListener

イベントと処理関数を関連付ける場合は、この addEventListener メソッドを以下のように記述します。

イベントの追加

オブジェクト.addEventListener('イベント',関数名,イベントの伝達方向);

  1. イベントの部分は、追加したいイベントが 'onload' なら 'on' を除き 'load' というように記述します。
  2. 関数名は、文字通り関数の名前が記述されますが、この関数名には引数を指定する '()' を取り除いて記述。
  3. イベントの伝達方向の部分ですが、値として入るのは truefalse で、指定しない場合は false となります。

    親から対象(true)、対象から親(false)というように、要素へのイベントの伝わる方向を指定します。

    実際には、キャプチャリング段階でイベントを拾うかどうかという機能です。(false の場合はバブリング段階で処理へ。)

    例えば、同様のイベントリスナーとして登録された親要素があった場合で、それが true なら、対象にイベントが発生したときイベントが対象に伝達する前に、キャプチャリング段階で親要素に登録されたイベントが実行されます。

IE用のイベント処理の追加 / .attachEvent

IEでは8以下で addEventListener メソッドに対応していないので、同様にリスナーとして追加する機能を持つ attachEvent メソッドを使用します。

イベントの追加(IE用)

オブジェクト.attachEvent('on'+'イベント',関数名);

上の記述で 'on' を付けてるのは、addEventListener との兼ね合いからです。実際には 'onload' そのままが入ります。

実際に使用する場合のサンプル

IEの場合も考えると判別が必要なので、以下のように一つの関数として作成する必要があります。

  • function add_listener(a,b,c){
    • if(a.addEventListener){
      • a.addEventListener(b,c,false);
    • }else if(a.attachEvent){
      • a.attachEvent('on'+b,c);
    • }else{
      • a['on'+b]=c;
    • }
  • }

例えば onload 時に load() という関数を実行したい場合は、以下のようにしてリスナーとして登録することができます。

add_listener(window,'load',load);

追加したイベントの削除

ついでなので、イベントリスナーに登録された関数を削除する方法も記述しておきます。

削除するときは removeEventListener メソッドと detachEvent メソッドを同じように指定します。

  • function remove_listener(a,b,c){
    • if(a.removeEventListener){
      • a.removeEventListener(b,c,false);
    • }else if(a.detachEvent){
      • a.detachEvent('on'+b,c);
    • }else{
      • a.removeAttribute('on'+b);
    • }
  • }

使用するときもほぼ同様です。

後書き

今回これを踏まえて、window.onload = function(){} 等のイベントハンドラで設定していた部分を書き直してみました。

ということで、過去の記事の記述でのイベントハンドラを使用している部分も、多少変更したところもあります。

サイト内関連ページ : 引数を必要とする関数をイベントリスナーに登録する場合に

スポンサードリンク

inserted by FC2 system