JS クリックイベントが勝手に繰り返し実行されてしまいます

Question

やりたいこと

DBの検索結果を、htmlのテーブルで出力させるアプリを作っています。
クエリは全てgetで処理しています。

検索結果は500件ずつ表示させるので、そのボタンを作っています。

仕様

「次の500件」ボタンを押すと、現在のパスを取得し、
正規表現で多少の解析をしたのちに、
&move=next500
を付け足す。

コード

var movepage= function(nexpre) {
    var url=decodeURI(location.href);
    var myregex1=new RegExp(/?/);
    var myregex2=new RegExp(/&move=next500|&move=previous500/);
    var myregex3=new RegExp(/page=([0-9]+)/);

    url = url.replace(myregex2,"");

    if(url.match(myregex1)==null){
        url+="?";
    }

    if(url.match(myregex3)==null){
        url+="&page=1";
    }else{
        var curpagenum=url.match(myregex3);
        if (nexpre==="next"){
            var newpagenum=Number(curpagenum[1]) + 1;
        }else{
            var newpagenum=Number(curpagenum[1]) - 1;
        }
        var newpagestr="page=" + String(newpagenum);
        url=url.replace(myregex3,newpagestr);
    }
    url += "&move=next500";
    window.location.href=url;
};


var next500=document.getElementById("next500");
if(next500){
    next500.addEventListener("click",movepage("next"));
};

現象

以上のコードでwebページを開くと、
何もボタンをおさないうちから、クリックイベントに登録した関数が連続して実行され始めます。
つまり、勝手に「次の500件」が連続して動作し始め、次々にページが切り替わります。

なお、
movepage= function(nexpre){...
の関数定義をやめて、

if(next500){
    next500.addEventListener("click",function(){
・・・

という風に直書きすると、正常に動作します。

質問

JSのことがあまり分かっていないので基本的なところで間違えているのかもしれません。
どのようにしたら解決するでしょうか。

なお、前の500件でも同じような処理をするので、重複を避けるため、直書きはしたくないと思っています（現状は暫定的に、２つとも直書きして無理矢理動かしています）。

よろしくお願いします。

（なお、はじめは普通にformからクエリを発行していたのですが、諸々の兼ね合いで、このJSの方式のほうが管理しやすいと思ってこうしました。最適なのかどうかわかりませんが、それ自体も問題があるということでしたら、ご指摘ください。また、JSのコードの作り方もここがよくないよ、などあったら遠慮無くご指摘ください）

Answer 1

// next500.addEventListener("click",movepage("next")); // 渡す瞬間に movepage が実行されてしまっている
//                                       ↓
   next500.addEventListener("click",function(){ movepage("next"); } );

Comments

[退会済みユーザー]

ありがとうございます。無事に動きました。（関数に関数を渡しただけでなぜ即実行されるのか今ひとつ飲み込めていないのですがもう少し勉強してみます）

[kei344]

movepage("next") は実行してますよ。関数だけを渡す場合は movepage のみですね。

[退会済みユーザー]

ああ、なるほど。言われてみればカッコを付けたら実行されますね… お恥ずかしい限りです。
すると、引数がつくときは、別の関数でラップしなくてはならない（コールバック？）ってことになるんですかね。

[kei344]

> 引数がつくときは、別の関数でラップしなくてはならない（コールバック？）ってことになるんですかね。
「別の関数でラップ」は「無名関数にラップ」ですね。「コールバック」は後で使う関数を渡しておく場合全般に言います。（細かいですが）

無名関数以外にも、addEventListenerならhandleEventを使うとか、bindするとかありますが、私は無名関数を使うことが多いです。説明するのがちょっと難しいので、気になったら調べてみてください。

【addEventListenerのhandleEventについて - 7cc@はてなブログ】
http://7cc.hatenadiary.jp/entry/eventlistener-handleevent

【Javascriptのbind関数と部分適用 〜 JSおくのほそ道 #015 - Qiita】
https://qiita.com/hosomichi/items/e11ad0c4ea79db2dee84#%E3%81%9D%E3%81%AE2%E5%BC%95%E6%95%B0%E3%82%92%E4%BA%88%E7%B4%84%E3%81%99%E3%82%8B

[退会済みユーザー]

色々教えていただきありがとうございます。細かいご指摘大歓迎です（独学ですが本格派になりたいといつも思っています）。更に勉強してみます。ありがとうございます。

Answer 2

addEventListenerの部分でmovepageを実行したらページ遷移するのは当たり前です.
イベントリスナには**movepageを呼び出す関数**を渡しましょう.

if(next500){
    next500.addEventListener("click", e=>movepage("next"));
};

Comments

[退会済みユーザー]

ありがとうございます。