はじめに

javascriptやjqueryでイベントリスナーをいざ、登録しようとすると、最初に迷うことは、では、どこで登録したらいいのかということです。どこでもいいわけではありません。
では、何をベースに登録場所を特定したらいいのかということです。
この記事は、初心者の方に、参考になればという意味で、自分の経験談として書いています。実は、今でもイベントリスナーの登録では、動かない場所で登録して失敗をしています。

例として、ボタンにリスナーを登録するケースで

ボタンにリスナーを登録するだけでも、そのボタンがどのドキュメント空間にあるかによって決まります。ページにいくつかのドキュメント空間がある場合は注意が必要です。よくあるケースは、ページ内に複数のiframeがあるケースです。
iframeはそれぞれが別空間です。親ページとも異なっています。
例えば、あるiframeにあるボタンを親のフレームで登録しようとしても動作しません。ボタンがあるiframeのドキュメントで登録する必要があります。

ここで、注意することは、ページのhtmlファイルやjavascriptファイルの読み込み順序です。

ファイルの読み込み順序

htmlファイルを先にロードしておき、そのあとにリスナーを定義したスクリプトファイルをロードする順序にします
ページでロードしているjavascriptファイルがひとつならば、わかるのですが、複数あるとどのスクリプトファイルに登録するかという問題です。自分が作成しいているスクリプトファイルが、複数ある場合、ボタンを定義しているhtmlファイルにタグを使ってスクリプトファイルを登録します。このスクリプトファイルでリスナーを登録します。

ボタンを登録したhtmlページファイルでリスナーのスクリプトファイルを定義しておけば、そのページファイルをロードしたときに、スクリプトファイルもロードされ、実行されます。ボタンのロードが先に、来るようにしておきます。

javascriptファイルの静的ロードと動的ロード

静的ロードはhtmlファイルが読み込まれたときにロードされます。動的ロードは、何らかのアクションでロードされるjavascriptファイルです。
この動的ロードで読み込まれるjavascriptファイルにもリスナーは登録できます。
■静的ロードのサンプル
これは、main.jsファイルが読み込まれたときに登録するリスナーの例です。
clickイベントリスナーを登録していますが、処理を実行するときは、ヘルプボタンをclcikしたときです。それまでは登録しただけで何もしません。

main.js

$("#help").on('click',()=>{
    alert("ヘルプ");
    /******************************************************
    *ヘルプのpop画面を表示
    *bodyの最後にpopをアペンドするが、その要素を画面の中央へ表示
    *する。ドラッガブルで。positionはfixedで。サイズはwidth:800px;
    *height:500px;
    * 
    *******************************************************/
   let html = "<div id='pop_help' style='overflow:scroll;background-color:white;border:solid 5px blue;position:fixed;top:0px;left:25%;width:1000px;height:400px;'><p>ページの説明</p><br></div>";
   
    $("body").append(html);
    $("#pop_help").draggable();
    let dd = htmlspecialchars(data);
    
    $("#pop_help").html(dd);
    
    $("#html_code").on('click',() => {
        alert("html_code");

});
    
   
});

■動的ロードのサンプル
main.jsの最後部にあります。ここで、定義しているコードは一種の入れ子になっています。リスナーの中にさらにリスナーを定義しています。
これは、ヘルプボタンがクリックされたときに新たにそこで登録されるリスナーになります。これは、動的ロードのサンプルと言えます。ヘルプボタンが押されるまではこのリスナーは存在しません。

main.js

    $("#html_code").on('click',() => {
        alert("html_code");
    });

この例のように、リスナーのリスナーというような登録の仕方の場合もリスナーの登録場所を探す問題に当てはまります。
静的リスナーの登録は比較的わかりやすいのですが、動的リスナーの登録は登録場所を考えておかないとどこで登録したらいいのかわからないことになります。
もっと難しい登録は、次のプラグインの時です。

プラグインでリスナーを登録する場合(ちょっと中級になりますが)

プラグインでもリスナーは登録できます。
プラグインには、content.jsファイルとbackground.jsファイルの2種類のスクリプトファイルがあります。
そのいずれにもリスナーは登録できます。それぞれのファイルは、ロードタイミングは異なります。content.jsファイルはタブがリロードするたびに読み込まれます。background.jsファイルはブラウザーが開かれたときに読み込まれまのす。

executeScriptで登録するリスナー(これも中級になりますが)

executeScriptでもリスナーは登録できます。
executeScriptを実行したときに登録します。executeScriptはbacjground.jsで生成・登録します。
たとえば、yahoo!JAPANのような外部ページを開いて、そこで拡張機能のボタンをクリックしたときにbackground.jsファイルが実行しますが、そこでexecuteScriptを生成して起動します。その時の引数はタブIdとフレームId(frameId)ですが、このframeIdは0になります。親フレームは0になります。このexecuteScriptが実行したときにリスナーを登録できます。このYahoo!JAPANページにあるボタンをクリックしたときに実行するリスナーを登録できます。

このような考え方でイベントリスナーを登録場所を探すことができます。
イベントリスナーの登録は、どのタイミングで何を実行するかで、登録する場所がことなりますので、注意が必要です。

あとがき

まだ、いろいろなシチュエーションでリスナーを登録する場面がありますので、都度、追加補足してゆきたいと思います。
自分でもいまだに、リスナーを登録するときはいろいろ悩んで登録しています。